Grid Row

A grid row is a horizontal division of a grid container that contains grid items. Grid is a powerful layout system in CSS that allows developers to create complex and flexible layouts using a two-dimensional grid.

Grid rows are defined by the grid-template-rows property, which specifies the height of each row in the grid. The value of this property can be a length, a percentage, or a fraction of the available space. Like with columns, you can define the height of each row explicitly or let the browser calculate it automatically based on the content or available space.

Purpose

The purpose of grid rows is to define the vertical structure of a grid container and to control the placement and size of grid items within the grid. By defining the height of each row, developers can create layouts that have consistent or varying row heights, depending on the design requirements. This allows for more control over the visual hierarchy and balance of the layout as a whole.

Grid rows also provide a powerful way to align and distribute grid items within the grid. By using the align-items and justify-items properties, developers can align grid items along the row and column axes respectively. This allows for precise control over the placement of items within the grid, making it easier to create complex and responsive layouts.

Usage

To create a grid row, you first need to define a grid container. This is done by setting the display property of an element to grid or inline-grid. Once you have a grid container, you can define the grid rows using the grid-template-rows property.

The grid-template-rows property accepts a value that defines the height of each row in the grid. This value can be a length, a percentage, or a fraction of the available space. The following example shows how to define two rows of equal height:

.grid-container {
  display: grid;
  grid-template-rows: 1fr 1fr;
}

In this example, the grid container has two rows, each with a height of 1 fraction unit. This means that each row will take up an equal amount of space within the grid container.

You can also define the height of each row explicitly by using a length or percentage value. The following example shows how to create a grid with three rows, where the first row is 100 pixels high, the second row is 50% of the available space, and the third row is auto-sized based on the content:

.grid-container {
  display: grid;
  grid-template-rows: 100px 50% auto;
}

In this example, the first row is set to a height of 100 pixels, the second row is set to a height of 50% of the available space, and the third row is set to auto, which means that it will be sized based on the content of the grid item within it.

Grid rows can also be named using the grid-template-rows property. This allows developers to reference rows by name when positioning grid items within the grid. The following example shows how to name two rows in a grid:

.grid-container {
  display: grid;
  grid-template-rows: [header] 100px [content] auto [footer] 50px [end];
}

In this example, the first row is named “header”, the second row is unnamed and set to a height of 100 pixels, the third row is named “content” and set to auto, the fourth row is unnamed and set to a height of 50 pixels, and the fifth row is named “end”.

To position a grid item within a named row, you can use the grid-row-start and grid-row-end properties. These properties accept a value that specifies the starting and ending positions of the grid item along the row axis. The following example shows how to position a grid item within the “header” row of a grid:

.grid-item {
  grid-row-start: header;
  grid-row-end: header;
}

In this example, the grid item is positioned within the “header” row by setting grid-row-start and grid-row-end to “header”.

Lastly, grid rows can be modified using the grid-row-gap property, which specifies the size of the gap between rows in a grid. This property can be used to add visual spacing between rows, making the layout easier to read and understand. The following example shows how to add a gap of 20 pixels between rows in a grid:

.grid-container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-row-gap: 20px;
}

In this example, a gap of 20 pixels is added between each row in the grid using the grid-row-gap property.