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.

Extra articles: CSS Grid Container and CSS Grid Item

CSS Basic Grid permalink

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 permalink

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 permalink

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! permalink

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