Grid-based layouts

CSS has allowed pages to be laid out according to the box-model, this fits nicely with laying websites out using a grid. Grids can be produced with CSS floats (older way, requires clearfix), CSS tables (not recommended, not easily accessible, used in the 90s and early 2000s), CSS Flexbox (recommended) and CSS Grid (recommended).

All of the following examples take part in the border-box model rather than the default content-box model.

Float-based grid

CSS floats can be used for creating grid-based layouts, it is as simple as floating an item to the left and giving it a specific width. For example:

Sidemenu

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Main content

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque est velit vitae eligendi quos corrupti eum, ipsa esse. Ipsa dolorum praesentium velit? Sed explicabo temporibus repellendus ab quibusdam enim laborum amet quo eveniet maxime doloribus expedita vero illum nesciunt reiciendis delectus, voluptates voluptas cum ea iste! Ex odio repellendus dolores!

Sidemenu

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

By default, elements with the float-xx classes are not floated and have a block outer display type. Upon reaching 1024px in screen size, the elements with the classes will be floated to the left and have their respective widths applied. This is a very simple example of creating a mobile-first responsive grid with CSS floats.

A more suitable grid with floats would include a row class, alongside some amount of column classes. The following example uses a 12-column float-based grid with clearfix applied to the rows:

Sidemenu

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Main content

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque est velit vitae eligendi quos corrupti eum, ipsa esse. Ipsa dolorum praesentium velit? Sed explicabo temporibus repellendus ab quibusdam enim laborum amet quo eveniet maxime doloribus expedita vero illum nesciunt reiciendis delectus, voluptates voluptas cum ea iste! Ex odio repellendus dolores!

Sidemenu

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

To give the columns equal height, the one true layout method was used. This involves hiding overflow on the row while giving each column a magic number for both padding-bottom and margin-bottom.

Flexbox-based grid

  • This content also appears on the Flexbox page

Flexbox can also be used to create grids of content, this requires a container element with display: flex and flex-direction: column applied for containing rows of content. Each container will contain row elements, with display: flex and wrapping behaviour applied. Each column is then created with a specific flex-basis, col-6 would have a flex-basis: 50% on a 12-column grid for example:

Box 1

Placeholder image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque esse veritatis officiis sunt eligendi beatae ducimus sapiente laudantium non aliquam!

Box 2

Placeholder image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque esse veritatis officiis sunt eligendi beatae ducimus sapiente laudantium non aliquam!

Box 3

Placeholder image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque esse veritatis officiis sunt eligendi beatae ducimus sapiente laudantium non aliquam!

Box 5

Placeholder image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque esse veritatis officiis sunt eligendi beatae ducimus sapiente laudantium non aliquam!

Box 6

Placeholder image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque esse veritatis officiis sunt eligendi beatae ducimus sapiente laudantium non aliquam!

A media query is used to change the flex-basis dependent on the screen size, any column below 1024px in screen width will have a flex-basis: 100%.

This Flexbox grid could then be used to create different page layouts, such as the holy grail layout:

Navbar

Side menu

Main content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda numquam enim aut? Aspernatur nemo eligendi saepe, impedit, error accusantium cupiditate magnam doloribus dolor in a! Aperiam quis a magni error.

Side menu

Footer

A benefit of Flexbox seen here is that we don't need any magic numbers in the CSS to get equal height columns like a float-based layout.