Aligning Content in CSS: Introduction to Grid - Part 7

Introduction

Today’s article will be the last in our grid layout series. We will introduce the properties that apply to grid items. Let’s finish strong!

grid-column-start, grid-column-end, grid-row-start and grid-row-end

These properties specify the boundaries of a grid item’s area in both horizontal and vertical directions.

Let’s revisit James’ example: for a structure, you need to specify where it starts in the east, where it ends in the west, the southern boundary, and how far it extends to the north. This provides a clear definition of the structure’s size and location.

The syntax is as follows:

.item {
    grid-column-start: <number> | <name> | span <number> | span <name> | auto
    grid-column-end: <number> | <name> | span <number> | span <name> | auto
    grid-row-start: <number> | <name> | span <number> | span <name> | auto
    grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

The separator | in the syntax represents “or,” meaning there’s effectively just one property value. Specifically:

<number>: Defines the starting or ending grid line number relative to the grid container.
<name>: Refers to a custom-named grid line.
span <number>: Indicates that the grid item will automatically span across the specified number of grid cells.
span <name>: Indicates that the grid item will automatically expand until it aligns with the specified grid line name.
auto: Automatically determines the grid item’s placement and span based on the available space.

Here’s an example to illustrate, with the following CSS and HTML:

.container {
    grid-template-columns: [vertical-line-1] 80px [vertical-line-2] auto [vertical-line-3] 100px [vertical-line-4];
    grid-template-rows: [row-1-start] 25% [row-1-end] 100px [row-2] auto [row-3-end];
}
.item-a {
    /* Spanning from the second vertical line to the third */
    grid-column-start: 2; 
    grid-column-end: vertical-line-3;
    

    /* Spanning from the first row start to the third row */
    grid-row-start: row-1-start;
    grid-row-end: 3;
    background-color: rgba(255, 255, 0, .5);
}

<div class="container">
    <div class="item-a">
      <strong>.item-a</strong>
    </div>
  </div>
</div>

The result is as follows:

inital

and then we use developer tools inspect the container dom:

inital1

Each grid line in a grid layout has a built-in <number> starting from 1. In the 3×3 grid layout above, there are four horizontal and four vertical grid lines (including the edges). The <number> values for horizontal lines increase from left to right (1 to 4), and for vertical lines, they increase from top to bottom in the same way.

In this example, all grid lines have been assigned custom names, corresponding to the leftmost vertical line. This makes the layout intuitive:

grid-column-start: 2: The left side of .item-a starts at the grid line with <number> value 2.
grid-column-end: vertical-line-3: The right side of .item-a ends at the grid line named vertical-line-3.
grid-row-start: row-1-start: The top side of .item-a starts at the grid line named row-1-start.
grid-row-end: 3: The bottom side of .item-a ends at the grid line with <number> value 3.

Note: Grid lines can be identified by either <number> or <name>. Using custom names alongside numerical indices adds flexibility and clarity, especially in complex layouts.

Demonstrating the Functionality of span

Next, let’s explore how the span keyword works. Below is the corresponding CSS and HTML:

.container {
    grid-template-columns: [vertical-line-1] 80px [vertical-line-2] auto [vertical-line-3] 100px [vertical-line-4];
    grid-template-rows: [row-1-start] 25% [row-1-end] 100px [row-2] auto [row-3-end];
}
.item-a {
    /* Spanning from the second vertical line to the third */
    grid-column-start: 2; 
    grid-column-end: span vertical-line-3;

    /* Spanning from the first row start to the third row */
    grid-row-start: row-1-start;
    grid-row-end: span 3;
    background-color: rgba(255, 255, 0, .5);
}

<div class="container">
    <div class="item-a">
      <strong>.item-a</strong>
    </div>
  </div>
</div>

The result is as follows:

inital2

For named grid lines, there is no difference between using span and not using span when only one matching grid line name exists (If there are multiple matching named grid lines, or if no matching grid line name exists, the span keyword will have a noticeable effect. For brevity, this won’t be further explained here.).

However, for numbered grid lines, the difference becomes clear. With span, it specifies the number of cells to span, not the grid line’s number. For example, grid-row-end: span 3 indicates that the current grid item will span across 3 cells. As a result, .item-b spans the entire height of the grid container.

grid-column and grid-row

Both grid-column and grid-row are shorthand properties. The former is a shorthand for grid-column-start and grid-column-end, while the latter is shorthand for grid-row-start and grid-row-end.

In the shorthand syntax, a slash is used to separate the start and end positions, as shown below:

.item {
    grid-column: <start-line> / <end-line> | <start-line> / span <value>;
    grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

The separator | in the syntax indicates “or.” The <start-line> refers to the value of the grid-*-start property, while <end-line> refers to the value of the grid-*-end property. For example:

.item-b {
    grid-column: 2 / span verticalLine3;
    grid-row: firstRowStart / span 3;
}

This is equivalent to:

.item-b {
    grid-column-start: 2;
    grid-column-end: span verticalLine3;
    grid-row-start: firstRowStart;
    grid-row-end: span 3;
}

grid-area

The grid-area property defines the area occupied by a grid item. We demonstrated this property earlier when introducing the grid-template-areas property. With grid-template-areas, we can create custom grid areas, and then use the grid-area property to assign grid items to those areas, allowing for automatic distribution of the areas.

The grid-area property is a shorthand for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties. Additionally, it also supports grid names defined by the grid-template-areas property.

The syntax is as follows:

.item {
    grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

<name>: The name of the area, created by the grid-template-areas property.
<row-start> / <column-start> / <row-end> / <column-end>: Specifies the starting positions of the grid area along the row and column axes.
The <name> property values can be referenced in the example from above (James’ case). Here, we demonstrate the area division based on position in the following code:

.container {
    grid-template: 1fr 1fr 1fr/1fr 1fr 1fr 1fr;
}
.item-c { 
    grid-area: 1 / 2 / 3 / 4;
}

inital4

The horizontal grid lines start at position 1 and end at position 3, while the vertical grid lines start at position 2 and end at position 4. This defines a 2x2 sized area.

justify-self

justify-self controls the horizontal alignment of a single grid item. The syntax is as follows:

.item {
    justify-self: stretch | start | end | center;
}

The options (assuming the document flow direction hasn’t changed) are as follows:

stretch: It stretches, filling the horizontal space.
start: The grid item shrinks to fit the content size, aligning itself to the left edge of the grid line.
end: The grid item shrinks to fit the content size, aligning itself to the right edge of the grid line.
center: The grid item shrinks to fit the content size and is horizontally centered within the grid area.

align-self

align-self specifies the vertical alignment of the grid item, determining whether it stretches vertically or aligns to the top, center, or bottom. The syntax is as follows:

.item {
    align-self: stretch | start | end | center;
}

Where (assuming the default document flow direction for web pages):

stretch: stretches the grid item vertically to fill the space.
start: The grid’s vertical size shrinks to fit the content and aligns with the top grid line.
end: The grid’s vertical size shrinks to fit the content and aligns with the bottom grid line.
center: The grid’s vertical size shrinks to fit the content and is vertically centered within the grid area.

place-self

place-items allows the align-self and justify-self properties to be combined into a single declaration. The syntax is as follows:

.item {
    place-self: <align-self> <justify-self>?
}

The order is align-self first, followed by justify-self.

Additional Grid Concepts

In Grid layout, properties and declarations like float, display: inline-block, display: table-cell, vertical-align, and column-* have no effect on grid items. This is considered common knowledge in Grid layout and is often asked in interviews, so make sure to remember it.

Finally

At last, I’ve wrapped up summarizing all the grid-related properties in the last 7 articles. The reason I enjoy writing blogs is that, on one hand, it helps others learn new things, and on the other hand, it allows me to better master what I thought I already knew. After all, as the proverb goes, “A full cup of water doesn’t shake, but a half-full cup shakes the most.” Writing an article is a process of refilling one’s own knowledge. Cheers!

Beyond the Grid: Exploring Use Cases for Subgrid in CSS Grid Layout

Aligning Content in CSS: Introduction to Grid - Part 6