Lesson 8: CSS Grid

The best way to lay things out is on a grid, but up until this year (2017) there was no grid in CSS. Developers created their own pseudo grids to layout content. Designers and developers would curse each other because elaborate layouts that used to be achieved in print could not be achieved on the web without hours of work.

Microsoft, oddly enough, has led much of the effort to implement CSS grid. Today most major browsers support it including Chrome, Safari, Firefox, and IE Edge. IE 11 still supports an older version of the CSS grid spec.

For a complete guide to CSS grid go here. Here are some basics with examples.

The container:

CSS

.container {
    display: grid;
}

HTML

<div class="container"></div>

Rows and Columns

By default every child will take up 1 row and 1 column. You can determine how many rows and columns a child can take up using styles. The styles will not only determine the number of rows and columns but also where the element will be positioned in the grid.

CSS

img {
  width: 100%;
  
}
.container {
  display: grid;
  width: 900px;
}
.focus {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 2;
}
.side-1 {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
}
.side-2 {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 1;
}
.side-3 {
  grid-column-start: 4;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
}
.side-4 {
  grid-column-start: 4;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 1;
}
.bottom-1 {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 1;
}
.bottom-2 {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 1;
}
.bottom-3 {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 1;
}
.bottom-4 {
  grid-column-start: 4;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 1;
}

HTML

<div class="container">
  <div class="focus">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/98/34/c1/9834c177ee42d94c8ae1d3ae98ae3c50--superhero-poster-superhero-party.jpg"/>
  </div>
  <div class="side-1">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/bf/b7/1f/bfb71f08590133ad728bf00dcaeb25ed--superman-poster-the-superhero.jpg"/>
  </div>
  <div class="side-2">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/17/ba/70/17ba70b5d152cb9042e4a0785dccf834--posters-vintage-vintage-comics.jpg"/>
  </div>
  <div class="side-3">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/48/85/59/488559be333f8e4063280df29ef7f1fe--wolverine-poster-wolverine-tattoo.jpg"/>
  </div>
  <div class="side-4">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/2c/eb/7f/2ceb7f1d556eccd718b80f0fcf84f956--famous-superheroes-superhero-poster.jpg"/>
  </div>
  <div class="bottom-1">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/36/e1/2d/36e12d3636f2d94ad6716b319e5312e3.jpg"/>
  </div>
  <div class="bottom-2">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/1e/d1/e3/1ed1e364f0e0a5fa9ea3d31b908496a9.jpg"/>
  </div>
  <div class="bottom-3">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/a9/ec/41/a9ec41e7acc522d3d890bf75fc6aec62--star-wars-poster-star-wars-art.jpg"/>
  </div>
  <div class="bottom-4">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/1d/f2/82/1df28243b220836f0993ba5b024d737c--poster-prints-ironman.jpg"/>
  </div>
 </div>

This code will produce this result:

You will notice that I use a pattern of using the grid-column/row-start to define where I want the element to be placed and then I use the grid-column/row-end to define how much room to take.

As always there is a more concise way to do this in CSS.

The Shorthand Version

Using the same HTML, the following CSS will give you the same result:

CSS

img {
  width: 100%;
  
}
.container {
  display: grid;
  width: 900px;
}
.focus {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  
}
.side-1 {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}
.side-2 {
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
}
.side-3 {
  grid-column: 4 / span 1;
  grid-row: 1 / span 1;
}
.side-4 {
  grid-column: 4 / span 1;
  grid-row: 2 / span 1;
}
.bottom-1 {
  grid-column: 1 / span 1;
  grid-row: 3 / span 1;
}
.bottom-2 {
  grid-column: 2 / span 1;
  grid-row: 3 / span 1;
}
.bottom-3 {
  grid-column: 3 / span 1;
  grid-row: 3 / span 1;
}
.bottom-4 {
  grid-column: 4 / span 1;
  grid-row: 3 / span 1;
}

Here is a link to CodePen with this example. CodePen

Characteristic of a Microsoft product, there are many options and configurations you can use with grid. It is pretty much a Swiss army knife for web layouts. These include setting widths for columns and rows, naming grid areas, justifying grid items, styling row and column gaps, aligning grid items, and more.

If you don’t need to support IE11, grids are the way to go for layouts. Gone are the days of bootstrap grid layouts. For future lessons we will turn away from CSS and move into JavaScript. We’ll learn the basics as well as dive into new functionality including array functions and arrow functions.