Aligning Content in CSS: Introduction to Grid - Part 6

Introduction

In grid layout, there are four properties that apply specifically to the grid container and haven’t been introduced yet: grid-column-gap, grid-row-gap, grid-gap, and grid. These properties are key to controlling spacing and fine-tuning the overall grid structure. Let’s continue exploring the grid layout!

grid-column-gap and grid-row-gap

The grid-column-gap and grid-row-gap properties define the size of the gaps between grid cells. Think of these gaps as the width of streets between buildings. These properties are flexible and can be specified using units like pixels, percentages, or other CSS-supported measurements.

Definition:

<line-size>: Specifies the size of the gaps between grid cells in a grid layout.

Example:

In a simple 2×2 grid where the horizontal gap between cells is set to 10px and the vertical gap to 15px, the layout would be configured as follows:

.container {
      grid-template-columns: 2fr 1fr;
      grid-template-rows: 1fr 2fr;
      grid-column-gap: 10px;
      grid-row-gap: 15px;
      display: grid;
      height: 200px;
      width: 414px;
      background-color: grey;
    }

    .container>div {
      outline: 1px dotted;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background-color: white;
    }

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

The browser renders the grid layout as follows:

grid-gap

The CSS grid-gap property serves as a shorthand for the grid-column-gap and grid-row-gap properties. The syntax is as follows:

.container {
    grid-gap: <grid-row-gap> <grid-column-gap>;
}

The order is to apply the horizontal gap (row) first, followed by the vertical gap (column).

For example, the 2×2 grid gap case above can also be expressed as:

.container {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 2fr;
    grid-gap: 15px 10px;
}

The effect is the same, so I won’t duplicate the illustration here.

grid

The grid-column-gap and grid-row-gap properties define the size of the gaps between grid cells. You can think of these gaps as the width of streets between buildings. These properties are versatile and can be specified using units like pixels, percentages, or other CSS-supported measurements.

The CSS syntax is as follows:

grid: none

none sets all the properties to their initial values.

grid: <grid-template>

It follows the same usage as grid-template. For example:

.container {
    grid: 100px 300px / 3fr 1fr;
}

This is equivalent to the following:

.container {
    grid-template-rows: 100px 300px;
    grid-template-columns: 3fr 1fr;
}

The question mark ? indicates that something is optional, meaning it can appear either zero or one time. In other words, you can omit both the dense keyword and the grid-auto-columns value.

Detailed explanation:

auto-flow && dense? is actually a value for the grid-auto-flow property, which is equivalent to row, column, row dense, or column dense.

However, instead of using the row and column keywords, the auto-flow keyword is used. But doesn’t this cause any issues? When should it be parsed as row and when as column?

The key is where the auto-flow keyword is placed in relation to the slash. If it appears to the left of the slash, it’s parsed as row; if it’s to the right, it’s parsed as column. In this case, since the syntax is on the right side of the slash, grid-auto-flow is parsed as column.

The grid-auto-columns property has a question mark ? after it, making it optional. If omitted, grid-auto-columns is parsed as auto.

We’ll explore the syntax through a few examples:

.container {
    grid: 100px 300px / auto-flow 200px;
}

In the CSS code above, the dense keyword is omitted, and the <grid-auto-columns> is enabled, which is equivalent to the following CSS:

.container {
    grid-template-rows: 100px 300px;
    grid-auto-flow: column;
    grid-auto-columns: 200px;
}

In Grid layout, properties before the slash pertain to rows, and those after the slash pertain to columns.

grid: [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>

This syntax is similar to the one mentioned earlier, except that here the slash separates the implicit grid on the left and the explicit grid on the right. Since the auto-flow keyword is on the left side of the slash, it is interpreted as row. So:

.container {
    grid: auto-flow dense 100px / 1fr 2fr;
}

This is equivalent to the following CSS:

.container {
    grid-auto-flow: row dense;
    grid-auto-rows: 100px;
    grid-template-columns: 1fr 2fr;
}

The shorthand syntax for the grid property can be a bit confusing at first. It may seem overwhelming with various non-alphabetical symbols, almost like an alien language. However, the symbols such as &, [, ], and ? do not affect the actual writing; they are simply used to represent logic.

Let’s break it down:

• grid: none is simple and straightforward, requiring no further explanation.
• If the grid layout is conventional, with no items placed outside the grid container, we use the grid-template property.
• The last two syntaxes are only used when grid items extend beyond the grid container: either grid-template/auto-flow or auto-flow/grid-template. It’s that simple.

In the end, there’s nothing too complex. It’s normal to feel uncertain at first. With more practice and repetition, you’ll soon master Grid layout and become skilled at it.

In the next blog, we will begin introducing CSS properties that apply to grid items. Until then!