Aligning Content in CSS: Introduction to Grid - Part 1

Introduction

Set display: grid for block-level elements like <div> or display: inline-grid for inline elements like <span>, and the Grid layout will be initialized! For example:

div {
    display: grid;
}

At this point, the <div> is now a “grid container,” and its child elements are referred to as “grid items.”

The key difference between grid and inline-grid lies in their display behavior. An inline-grid container is inline, allowing it to align on the same line as text or images. On the other hand, a grid container behaves as a block-level element, with a default width of 100%, and does not align on the same line as inline elements.

In a Grid layout, all CSS properties related to it are categorized into two groups: one set applies to the grid container, while the other set applies to the grid items. as shown in the screenshot below:

There are many CSS properties related to Grid layout, but they are not difficult to understand. The real challenge is that these properties can be hard to remember, requiring practical experience and regular practice to use them effortlessly.

Grid layout is a two-dimensional layout method, where the horizontal and vertical directions always coexist. Many of its layout concepts perfectly resemble the layout of streets—think New York, not Paris.

Therefore, in my opinion, the Grid layout is like a city planner. Here’s the story: James is a programmer who saved up some money. He bought a large plot of land and wanted to recreate the city of New York. The land he bought was quite large, so the challenge became how to divide it. James decided to use the Grid layout to organize the land.

grid-template-columns和grid-template-rows

These two CSS properties are used for basic street division. “Columns” refers to the vertical division, while “rows” refers to the horizontal division. Currently, there are generally two types of street layout designs:

A: The gap between the blocks is like a narrow gap that isn’t passable, and its width can be neglected.

B: The gap has a certain width and can be passed through.

The syntax for the division here is the same as the one used for dividing street, as shown below:

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

That is: <track-size> - Can be a length value, a percentage value, or the “fr” unit (a grid’s remaining space proportional unit). <line-name> - The name of the street in the middle, which can be freely named.

Let’s look at a simple example:

.container {
    grid-template-columns: 80px auto 100px;
    grid-template-rows: 25% 100px auto 60px;
}

The three values for grid-template-columns represent the division into three columns. From left to right, the sizes are 80px, auto (automatic), and 100px. The grid-template-rows property has four values, setting the height of each row from top to bottom as 25%, 100px, auto (automatic), and 60px.

The effect is as shown below:

We can also name the grid lines by wrapping our custom names in square brackets, such as:

.container {
    grid-template-columns: [firstColumnLine] 80px [columnLine2] auto [columnLine3] 100px [finalLine];
    grid-template-rows: [firstRowStart] 25% [firstRowEnd] 100px [row3] auto [row4] 60px [endOfRow];
}

Why is it important to name grid lines?

The Grid layout is similar to the division of streets, where the dividing lines are usually the roads. If we don’t name these roads, it will be difficult to describe certain areas later. For example:

At the intersection of Lexington Ave and East 86th St, there is a Best Buy store.

Because we have named the streets, it becomes easier to describe a specific area, and others can easily identify it. But if we don’t name the streets and instead describe it like this:

At the crossroads of Vertical 8th St and East 86th St, there’s a Best Buy store.

This area description would become problematic. If a new road were built further of Vertical 8th St, wouldn’t Vertical 8th St then become Vertical 9th St, causing confusion?

In other words, naming the grid lines in Grid Layout helps describe regions more effectively. If we don’t need to describe a particular area, then there’s no need to name the grid lines.

Double Naming

Since the grid lines in the middle of the grid are shared by both adjacent cells, similar to how roads have two sides, we can assign two names (separated by a space) when naming them, with each name representing one side. For example:

.container {
    grid-template-columns: [firstVerticalLineStart] 80px [firstVerticalLineEnd  secondVerticalLineStart] 100px [lastVerticalLine];
}

The repeat syntax

Sometimes, grid divisions are very regular. For example, if we create a grid with a 40px width and the layout width is 960px, writing 40px 24 times would be repetitive and inefficient. In such cases, the repeat() syntax can be used to simplify the code, like this:

.container {
    grid-template-columns: repeat(24, 40px [col-start]);
}

It is equivalent to the following:

.container {
    grid-template-columns: 40px [col-start], 40px [col-start], /* …omitting 20 more for brevity…*/, 40px [col-start], 40px [col-start];
}

What is the fr unit in CSS Grid Layout

The fr unit is short for the word “fraction,” and it represents a part of the available space.

Now, let’s explore this concept with a simple example:

.container {
    grid-template-columns: 1fr 1fr 1fr;
}

1:1:1, the grid width is divided into three equal parts. Here’s the effect displayed below:

If a fixed size value is specified, it will define the remaining space distribution.

.container {
    grid-template-columns: 200px 1fr 1fr 1fr;
}

There are 4 columns, with the widths of the last 3 columns being 1/3 of the grid container width minus 200px, as below:

What happens when fr is mixed with auto?

.container {
    grid-template-columns: auto 1fr 1fr 1fr;
}

From the above effect, it can be seen that when a fr size is set, the auto size acts as a wrapper, adjusting to the content’s width. If no fr size is set, the grid will stretch to fill the available space.

What happens if the sum of the fr values is less than 1?

.container {
    grid-template-columns: auto 0.25fr .25fr .25fr;
}

The calculation here is a bit more involved. First, since the first grid item’s size is set to auto, the space remaining for the fr units is the grid container’s width minus the width of the content inside the auto item. This means that the width of each of the following three 0.25fr elements is: (container width - width of the “auto width” content) * 0.25. The remaining space is then allocated to the first grid item, which is set to auto.

Summary

To summarize, we’ve explored how to calculate grid cell widths and heights, as well as the various ways grid sizes can be defined and adjusted. In the next article, we’ll delve into the powerful grid-template-areas property, which allows for incredibly flexible and creative layouts.