CSS grid part 7 – 12 column grid

A 12 column grid can be created in pure CSS. This is similar to that used by frameworks such as Bootstrap.

The grid container has a max-width of 1000px and is centred in the window. The parameter grid-template-columns is used to create a 12 column grid, using repeat. 

minmax is used on the rows to give a minimum height. auto will stretch the row height, so that any content is not cut off.

Each content area is given a grid column and grid row number to position it in a twelve column grid.

  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(100px, auto);
  max-width: 1000px;
  grid-gap: 10px;
  margin: 0 auto;
  background: yellow;
  grid-column: 1/13;
  grid-column: 4/13;
  grid-row: 2/4;
  grid-column: 1/4;

The HTML is very simple with semantic tags used to contain each section.


<div id="wrapper">


Leave a Reply

Your email address will not be published. Required fields are marked *