Beginner's Guide to CSS Grid

What is Grid?

Grid is a new CSS layout module created to support a two-dimensional layout system.

How to use it

Define Container

To start using CSS Grid, create a div element within the HTML, then define that element to be a grid container within the CSS. This sets the elements inside of the container to be the child elements directly affected by the grid settings. Keep in mind that default configurations have already been set at this point.

<div class="container">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</div>

.container {
    display: grid;
}

Define Templates

Next, define columns and/or row templates. Columns lay the elements horizontally, and rows lay the elements vertically. These values are space-separated and represent the track (width, length) size of the child elements.

.container {
    grid-template-columns: none; /** Default */
    grid-template-rows: none; /** Default */

    grid-template-columns: auto 150px;
    grid-template-rows: auto min-content;
    grid-template-rows: auto 150px;
    grid-template-rows: 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
}

Here are examples of defining a template for columns.

These are some of the most commonly used size properties:

fr unit represents a fraction of the available space in the grid container
auto sets the size based on the content that is inside them
{number}px defines a static size of the element
repeat() notation can be used to repeat all of a section of the track listing

Here are example use cases for row templates.

Gaps

Now that you have the basic layouts, consider configuring gaps next. Gaps can be set at the row or column level, and they define the spaces between the child elements. The default value for both is 0.

.container {
    column-gap: 10px;
    row-gap: 10px;
}

Consider the following examples. The first example has 3 elements laid out horizontally (grid-template-columns). Notice that there are 10 pixels of space between the 1st and the 2nd element, as well as the 2nd and the 3rd element. These gaps are added between all of the child elements. In the second example, the elements are laid out vertically (grid-template-rows) and the gaps are set to 10 pixels by rows, as the vertical spaces between the 2 elements indicate.

Justifications

A couple more to go. Configuring justifications. This setting allows you to set the horizontal location of the child elements. Let's look at a common use case.

.container {
    justify-content: center;
}

As you can see below, the child element with 50 pixels width is set in the center of the container not taking any extra space.

Alignment

Almost done. Lastly, you can also configure alignments. This is very similar to justifications with a few differences. Alignments allow the vertical location of the child elements to be set. Let's try a common use case once again: center.

.container {
    align-items: center;
}

In the final example below, you can see that the height of the element is set at 50 pixels and the container is set to 200 pixels. Because of the align-items property, the child is centered in the container.

Explore

Now that you've learned the basics, try them out in your projects! As you test them locally, you can use Chrome DevTools to inspect and CSS Grid! Here is a guide to doing just that! Consider checking out some of the links below as well. Thanks for reading!

Namito’s Clean Code