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
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque esse veritatis officiis sunt eligendi beatae ducimus sapiente laudantium non aliquam!
Box 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque esse veritatis officiis sunt eligendi beatae ducimus sapiente laudantium non aliquam!
Box 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque esse veritatis officiis sunt eligendi beatae ducimus sapiente laudantium non aliquam!
Box 5
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque esse veritatis officiis sunt eligendi beatae ducimus sapiente laudantium non aliquam!
Box 6
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
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.
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.