CSS Grid Introduction

Today we'll be looking at a flex competitor called CSS Grid!
As the name suggests, it's an awesome tool to make grids and layouts.

In general, a grid is build by having a container and some children inside it.

CSS Basic Grid

As for our HTML we are using the following setup

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

And to style this basic grid into four equal columns:

.grid {
  background: #1b9aaa;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1.5em;
}
.item {
  width: 100%;
  height: 200px;
  background: #06d6a0;
}

Note we add the grid-gap property, if we leave that out, the columns will be stuck to each other.
The template will work by defining it will have four small columns.

See and test it on Codepen.

See the Pen CSS Grid Introduction by Chris Bongers (@rebelchris) on CodePen.

Other Column Size

But what if we want the first item to span two columns? Then two small ones and the other way around for the second row?

<div class="grid">
  <!-- row 1 -->
  <div class="item item-col-2"></div>
  <div class="item"></div>
  <div class="item item-row-2"></div>
  <!-- row 2 -->
  <div class="item"></div>
  <div class="item item-col-2"></div>
</div>

For the CSS:

.grid {
  background: #1b9aaa;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1.5em;
}
.item {
  width: 100%;
  min-height: 200px;
  background: #06d6a0;
  &-col-2 {
    grid-column: span 2;
  }
  &-row-2 {
    grid-row: span 2;
  }
}

As you can see, we use grid-column to span the grid over two blocks horizontal.

And grid-row to span over two blocks vertical.

Feel free to play around with this Codepen.

See the Pen CSS Grid Introduction - Alternative by Chris Bongers (@rebelchris) on CodePen.

Browser Support

CSS Grid has support from all major browsers, we have some issues in IE, but they can be Polyfilled.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Comments

[Paul Ryan]

As a heads up, you should use gap instead of grid-gap. Nice post!

[Chris Bongers]

Ah nice one! yes should probably change those for cleaner code.
Do they also work as: column-gap instead of grid-column-gap?

[Niraj Nandish]

Love ur short tutorials. Just an opinion, I think it would be better if u put a picture of the end result. Ya Ik the code pen link shows it but with the picture the user can see the end result directly below the code and use the code pen for experimenting.

[Chris Bongers]

Hey Niraj, very nice mention, normally on my own blog will render the codepen result.
And hosting of images is expensive, but will try and upload them just for dev.to yeah.