Subscribe

CSS Grid Container

โœ๏ธ

Lets dive deeper into the container, and see what we can do with it!

16 Jul, 2020 ยท 4 min read

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

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

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

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

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

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

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

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

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

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

CSS Grid support

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Bringing perspective to CSS

7 Aug, 2022 ยท 2 min read

Bringing perspective to CSS

Creating a 3D Cylinder shape in CSS

29 Jul, 2022 ยท 3 min read

Creating a 3D Cylinder shape in CSS

Join 1829 devs and subscribe to my newsletter