CSS Grid Container

Yesterday we had the first touch with CSS Grid. Today we will be diving more into the container part of the grid.

The container is the outer wrapper, and much like flex, it has some awesome properties we can leverage.

You must consider the container as the element where you define your layout structure.

HTML Structure permalink

Today’s example will work with a three-column, two-row layout.

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

Grid Container permalink

So let’s start by making our container a grid:

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
}

We define our column layout and tell it to make three evenly spaced columns.

Grid Gaps permalink

Let’s add some gaps because these make it easier to see what’s happening.

We can add an all-around gap (column and row) or separate ones.

.grid {
  grid-gap: 1em; // Around
  grid-column-gap: 1em; // Columns
  grid-row-gap: 1em; // Rows
}

By default, the gaps are off (not existing)

Different Column Setup permalink

We can also change the column setup to be variant like this:

.grid {
  display: grid;
  grid-template-columns: 20px auto 100px;
}

The auto will fill to 100% set up.

Grid Rows permalink

As we’ve seen now, we are only defining the columns so that rows will be made automatically, but we can influence them like so:

.grid {
  display: grid;
  grid-template-rows: 80px 200px;
}

You can see the above in the following Codepen.

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

Grid Alignments Justify-content permalink

To align the grid, we can use several awesome functions:

Let’s start with justify-content. This property will align on the horizontal axis.

Space the items evenly:

.grid {
  display: grid;
  justify-content: space-evenly;
}

Give them space around:

.grid {
  display: grid;
  justify-content: space-around;
}

Give them space between them.

.grid {
  display: grid;
  justify-content: space-between;
}

Center the elements

.grid {
  display: grid;
  justify-content: center;
}

Move all blocks to the start.

.grid {
  display: grid;
  justify-content: start;
}

Or to the end

.grid {
  display: grid;
  justify-content: end;
}

Have a play with this Codepen.

See the Pen CSS Grid Container - Justify-content by Chris Bongers (@rebelchris) on CodePen.

Grid Alignments Align-content permalink

That was the horizontal axis, but we can also influence the vertical axis by using the align-content property.

Space the items evenly:

.grid {
  display: grid;
  align-content: space-evenly;
}

Give them space around:

.grid {
  display: grid;
  align-content: space-around;
}

Give them space between them.

.grid {
  display: grid;
  align-content: space-between;
}

Center the elements

.grid {
  display: grid;
  align-content: center;
}

Move all blocks to the start.

.grid {
  display: grid;
  align-content: start;
}

Or to the end

.grid {
  display: grid;
  align-content: end;
}

Play around with the following Codepen.

See the Pen CSS Grid Container - Align-content by Chris Bongers (@rebelchris) on CodePen.

Perfectly Centered Grid permalink

Of course, we can combine the two. Let’s make a centered grid:

.flex {
  display: flex;
  align-content: center;
  justify-content: center;
}

You can see this on the following Codepen.

See the Pen CSS Grid Container - Center 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