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.

#wrapper{
  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;
}
...................
header{
  grid-column: 1/13;
}
main{
  grid-column: 4/13;
  grid-row: 2/4;
}
aside{
  grid-column: 1/4;
}
...........

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

<html>
<head>
</head>
<body>

<div id="wrapper">
<header>Header</header>
<main>main</main>
<section>Section</section>
<aside>Aside</aside>
<nav>Nav</nav>
<footer>Footer</footer>
 </div>

</body>
</html>

Leave a Reply

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