CSS Layouts

Grid  ·  Flexbox  ·  Responsive Design

Part 1

CSS Grid — Two-Dimensional Layout

Grid defines rows and columns. The header and footer span all columns using grid-column: 1 / -1. The sidebar and main content share the middle row.

Header — grid-column: 1 / -1
Sidebar
200px fixed
Main Content

Defined with grid-template-columns: 200px 1fr and grid-template-rows: auto 1fr auto. The 1fr unit takes all remaining space.

Footer — grid-column: 1 / -1
Part 1B

Grid — Responsive Image Gallery

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) — columns appear and disappear automatically as the viewport changes. Try resizing your browser.

Design No. 4 Plain FaceDesign No. 4
Plain Face
Design No. 5 CobblestoneDesign No. 5
Cobblestone
Design No. 6 Panel FaceDesign No. 6
Panel Face
Design No. 7 Rock FaceDesign No. 7
Rock Face
Design No. 8 BushhammerDesign No. 8
Bushhammer
Design No. 9 HorizontalDesign No. 9
Horizontal
Part 2

Flexbox — Navigation Bar

A classic Flexbox use-case: display: flex; justify-content: space-between; align-items: center — links spread across the bar, logo on the left, CTA on the right.

Part 2B

Flexbox — Cards with flex-wrap

Each card uses flex: 1 1 260px. When the container is too narrow, cards wrap to the next row automatically.

04

Standard Plain Face

Can be furnished in all Divisions. But one endgate needed.

05

Cobblestone Face

A fine above-ground foundation block. 16-inch plate not made in Division D.

06

Panel Face

16-inch plate not made in Division D. But one endgate needed.

07

Rock Face

With 1½-inch tooled edge. Not made in Divisions C and D.

08

Bushhammer Face

With 1½-inch tooled edge. Division F not made in any size.

09

Horizontal Tooled

But one endgate needed. Consistent horizontal finish.

Part 3

Grid + Flexbox Combined

Grid handles the macro page structure (header / sidebar / content area / footer). Flexbox handles the components inside — the header bar and the card row.

⬡ BlockMachines — Catalogue

Filter by

  • All Designs
  • Plain Face
  • Rock Face
  • Panel Face

Featured Designs

Grid for the page, Flexbox for this row of cards:

Grid
Flex
Responsive
Mobile
© 2025 BlockMachines  ·  Sears, Roebuck & Co. archive
Part 4

Fluid & Responsive — Float Boxes + Media Queries

Classic float-based fluid grid. Boxes use float: left; width: 285px. A media query at 960 px and 640 px adjusts the wrapper width, so boxes reflow gracefully. Resize the window to see the effect.

Designs We Furnish for Our Block Machines

Taken from the Sears, Roebuck and Co., Chicago

Design No. 4

Design No. 4
Standard Plain Face

Can be furnished in all Divisions. But one endgate needed.

Design No. 5

Design No. 5
Cobblestone Face

A fine above-ground foundation block. 16-inch plate not made in Division D.

Design No. 6

Design No. 6
Panel Face

16-inch plate not made in Division D. But one endgate needed.

Design No. 7

Design No. 7
Rock Face

With 1½-inch tooled edge. Not made in Divisions C and D.

Design No. 8

Design No. 8
Bushhammer Face

With 1½-inch tooled edge. Division F not made in any size.

Design No. 9

Design No. 9
Horizontal Tooled

But one endgate needed.

Taken from the Trowel and Masonry Tool Collectors Resource