CSS Grid-Row Mastering Grid Layouts

Introduction

The grid-row CSS property is a handy shorthand that lets developers control the size and placement of grid items within a grid container. By specifying a grid item’s start and end positions along the row axis, this property enhances the flexibility and responsiveness of web designs. The grid-row property is widely supported across many devices and browser versions, ensuring compatibility and a consistent user experience.

This property is essential for web development and design, as it allows precise control over the layout of grid items. It’s especially useful for creating complex, adaptive grid structures that improve the overall user experience across various devices. By understanding and effectively utilizing the grid-row property, developers can leverage CSS grid layouts to build sophisticated and dynamic web interfaces.

Specification

The grid-row CSS property is part of the CSS Grid Layout Module Level 2. This module defines the CSS Grid Layout, which provides a grid-based layout system with rows and columns, making it easier to design web pages without relying on complex positioning and float techniques.

The grid-row property is a shorthand that combines the grid-row-start and grid-row-end properties. It allows developers to specify the start and end positions of a grid item along the row axis within a grid container. This shorthand simplifies the syntax and makes it easier to define the placement of grid items.

By using the grid-row property, developers can create more intuitive and maintainable CSS code, which is crucial for web development and design. The property is specified in the CSS Grid Layout Module Level 2, ensuring that it is well-documented and widely supported across modern browsers.

Browser Compatibility

The grid-row CSS property is widely supported across many devices and browser versions, making it a reliable choice for web development and design. This property has been available and fully functional in all major browsers since July 2020, ensuring compatibility and a consistent user experience.

Here is a summary of the browser compatibility for the grid-row property:

• Google Chrome: Supported since version 57.0 (March 2017)
• Microsoft Edge: Supported since version 16.0 (September 2017)
• Mozilla Firefox: Supported since version 52.0 (March 2017)
• Safari: Supported since version 10.1 (September 2016)
• Opera: Supported since version 44.0 (March 2017)

The broad support for the grid-row property across these browsers ensures that developers can confidently use it to create responsive and adaptive grid layouts without worrying about compatibility issues. This makes it an essential tool for modern web development and design, enhancing the flexibility and responsiveness of web interfaces.

Constituent Properties

The grid-row CSS property is a shorthand that combines two individual properties: grid-row-start and grid-row-end. These properties allow developers to specify the start and end positions of a grid item along the row axis within a grid container.

1. grid-row-start:
   • This property defines the starting line of a grid item along the row axis. It determines where the grid item begins within the grid container.
   • Example: grid-row-start: 3; will place the grid item starting from the third row line.
2. grid-row-end:
   • This property defines the ending line of a grid item along the row axis. It determines where the grid item ends within the grid container.
   • Example: grid-row-end: span 2; will make the grid item span across two rows starting from its defined start position.

By using the grid-row shorthand property, developers can simplify their CSS code and define both the start and end positions of a grid item in a single declaration. This makes it easier to manage and maintain the layout of grid items, enhancing the overall efficiency of web development and design.

Syntax

The grid-row property in CSS is a shorthand for specifying the start and end positions of a grid item along the row axis within a grid container. This property combines the grid-row-start and grid-row-end properties, allowing developers to define the placement and span of grid items in a compact and intuitive manner.

The syntax for the grid-row property is as follows:

grid-row: [grid-row-start] | [grid-row-end];

Key Features of the Syntax

1. Keyword Values:
   • auto: Indicates that the property contributes nothing to the grid item’s placement, allowing for automatic placement or span.
   • Example:

     grid-row: auto;
     grid-row: auto / auto;

2. Custom Identifiers:
   • <custom-ident>: Refers to a named grid line or grid area. The grid item will align to the specified named line or the edge of the named grid area.
   • Example:

     grid-row: somegridarea;
     grid-row: somegridarea / someothergridarea;

3. Integers:
   • <integer>: Specifies the row line number where the grid item starts or ends. Negative integers count from the end of the grid.
   • Example:

     grid-row: 2 / 4;
     grid-row: 3 / span 2;

4. Span Keyword:
   • span <integer>: Specifies the number of rows the grid item spans. The item will cover the specified number of rows starting from its defined start position.
   • Example:

     grid-row: span 2;
     grid-row: 1 / span 3;

5. Global Values:
   • inherit, initial, revert, revert-layer, unset: These values are used to inherit the property from the parent element, reset it to its initial value, or unset it.
   • Example:

     grid-row: inherit;
     grid-row: initial;

Usage Example

Here is an example demonstrating the use of the grid-row property:

.grid {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
}

.item1 {
  background-color: lime;
}

.item2 {
  background-color: yellow;
  grid-row: 2 / 4;
}

.item3 {
  background-color: blue;
  grid-row: span 2 / 7;
}

In this example:

• .item2 starts at the second row and spans to the fourth row.
• .item3 spans across two rows starting from its defined position and ends at the seventh row.

By using the grid-row property effectively, developers can create flexible and responsive grid layouts that adapt to different screen sizes and devices, enhancing the overall user experience.

Values

The grid-row CSS property can take various values to specify the start and end positions of a grid item within a grid container. These values determine the exact placement and span of the grid item along the row axis. Here is a detailed explanation of the values that can be used with the grid-row property:

1. auto:
   • Description: Indicates that the property contributes nothing to the grid item’s placement, allowing for automatic placement or span.
   • Usage:

     grid-row: auto;
     grid-row: auto / auto;

2. Custom Identifiers (<custom-ident>):
   • Description: Refers to a named grid line or grid area. The grid item will align to the specified named line or the edge of the named grid area.
   • Usage:

     grid-row: somegridarea;
     grid-row: somegridarea / someothergridarea;

3. Integers (<integer>):
   • Description: Specifies the row line number where the grid item starts or ends. Negative integers count from the end of the grid.
   • Usage:

     grid-row: 2 / 4;
     grid-row: 3 / span 2;

4. Span Keyword (span <integer>):
   • Description: Specifies the number of rows the grid item spans. The item will cover the specified number of rows starting from its defined start position.
   • Usage:

     grid-row: span 2;
     grid-row: 1 / span 3;

5. Combination of Integer and Custom Identifier (<integer> && <custom-ident>?):
   • Description: Specifies the row line number along with a custom identifier. Only lines with that name are counted.
   • Usage:

     grid-row: somegridarea 4;
     grid-row: 4 somegridarea / 6;

6. Span with Custom Identifier (span && [ <integer> || <custom-ident> ]):
   • Description: Specifies a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is n lines from the opposite edge. If a name is given as a custom identifier, only lines with that name are counted.
   • Usage:

     grid-row: span somegridarea;
     grid-row: 5 somegridarea span;
     grid-row: span 3 / 6;

7. Global Values:
   • Description: These values are used to inherit the property from the parent element, reset it to its initial value, or unset it.
   • Usage:

     grid-row: inherit;
     grid-row: initial;
     grid-row: revert;
     grid-row: revert-layer;
     grid-row: unset;

Example Usage

Here is an example demonstrating the use of different values with the grid-row property:

.grid {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
}

.item1 {
  background-color: lime;
  grid-row: auto;
}

.item2 {
  background-color: yellow;
  grid-row: 2 / 4;
}

.item3 {
  background-color: blue;
  grid-row: span 2 / 7;
}

.item4 {
  background-color: orange;
  grid-row: somegridarea 3;
}

.item5 {
  background-color: purple;
  grid-row: span somegridarea / span someothergridarea;
}

In this example:

• .item1 uses auto for automatic placement.
• .item2 starts at the second row and spans to the fourth row.
• .item3 spans across two rows starting from its defined position and ends at the seventh row.
• .item4 uses a combination of an integer and a custom identifier.
• .item5 uses the span keyword with a custom identifier.

By understanding and utilizing these values, developers can create precise and flexible grid layouts that enhance the overall user experience.

Formal Syntax

The grid-row CSS property follows a specific syntax that combines the grid-row-start and grid-row-end properties. This syntax allows developers to define the placement and span of grid items within a grid container using a concise and intuitive format.

The formal syntax for the grid-row property is as follows:

grid-row = <grid-line> [ / <grid-line> ]?;

Key Components of the Syntax

1. <grid-line>:
   • This represents a single value that defines the start or end position of a grid item along the row axis.
   • The <grid-line> value can be specified in several ways:
     • Keyword Values:

       auto

     • Custom Identifiers:

       <custom-ident>

     • Integers:

       <integer>

     • Combination of Integer and Custom Identifier:

       <integer> && <custom-ident>?

     • Span Keyword:

       span && [ <integer> || <custom-ident> ]

2. Optional Second <grid-line> Value:
   • The syntax allows for an optional second <grid-line> value, separated by a slash (/).
   • If two <grid-line> values are provided, the first value sets the grid-row-start property, and the second value sets the grid-row-end property.

Examples of Formal Syntax

Here are some examples demonstrating the formal syntax of the grid-row property:

/* Keyword values */
grid-row: auto;
grid-row: auto / auto;

/* Custom identifiers */
grid-row: somegridarea;
grid-row: somegridarea / someothergridarea;

/* Integers */
grid-row: 2 / 4;
grid-row: 3 / span 2;

/* Combination of integer and custom identifier */
grid-row: somegridarea 4;
grid-row: 4 somegridarea / 6;

/* Span keyword */
grid-row: span 2;
grid-row: 1 / span 3;
grid-row: span somegridarea;
grid-row: 5 somegridarea span;
grid-row: span 3 / 6;
grid-row: span somegridarea / span someothergridarea;
grid-row: 5 somegridarea span / 2 span;

/* Global values */
grid-row: inherit;
grid-row: initial;
grid-row: revert;
grid-row: revert-layer;
grid-row: unset;

Explanation of Examples

These examples cover various ways to use the grid-row property, from simple automatic placement to complex combinations of integers, custom identifiers, and span keywords. By understanding and utilizing these examples, developers can create precise and flexible grid layouts that enhance the overall user experience.

Using Grid-Row

The grid-row property in CSS is a shorthand that combines the grid-row-start and grid-row-end properties, letting you specify the start and end positions of a grid item along the row axis within a grid container. This property is essential for creating complex and adaptive grid layouts that enhance the user experience.

HTML

<div class="grid-container">
  <div>1</div>
  <div style="grid-row: 2 / 4;">2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 10px;
  background-color: #eee;
  padding: 10px;
}

.grid-container > div {
  background-color: #ccc;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Result

In this example, the grid container has four rows. The grid-row property is used to define the placement and span of the second grid item:

• The second grid item starts at the second row and spans to the fourth row.

By using the grid-row property, developers can create flexible and responsive grid layouts that adapt to different screen sizes and devices, enhancing the overall user experience. This property is essential for web development and design, as it enables precise control over the layout of grid items.

Grid-Row-Start Example

The grid-row-start property in CSS lets you set where a grid item starts along the row axis in a grid container. This is useful for controlling the vertical position of grid items.

HTML

<div class="main">
  <div class="Geeks1 GFG">1</div>
  <div class="Geeks2 GFG">2</div>
  <div class="Geeks3 GFG">3</div>
  <div class="Geeks4 GFG">4</div>
  <div class="Geeks5 GFG">5</div>
  <div class="Geeks6 GFG">6</div>
  <div class="Geeks7 GFG">7</div>
  <div class="Geeks8 GFG">8</div>
</div>

CSS

.main {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: green;
  padding: 10px;
}

.GFG {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.Geeks1 {
  grid-row-start: 3;
}

Result

In this example, the .Geeks1 grid item starts at the third row, showing how grid-row-start places a grid item vertically within the grid container.

Grid-Row-End Example

The grid-row-end property in CSS lets you set where a grid item ends along the row axis in a grid container. This is useful for controlling the vertical span of grid items.

HTML

<div class="main">
  <div class="Geeks1 GFG">1</div>
  <div class="Geeks2 GFG">2</div>
  <div class="Geeks3 GFG">3</div>
  <div class="Geeks4 GFG">4</div>
  <div class="Geeks5 GFG">5</div>
  <div class="Geeks6 GFG">6</div>
  <div class="Geeks7 GFG">7</div>
  <div class="Geeks8 GFG">8</div>
</div>

CSS

.main {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: green;
  padding: 10px;
}

.GFG {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.Geeks1 {
  grid-row-end: span 2;
}

Result

In this example, the .Geeks1 grid item spans across two rows, showing how grid-row-end sets the vertical span of a grid item within the grid container.

More Examples

The grid-row property in CSS is versatile and can be used in many ways to control the placement and span of grid items within a grid container. Here are some examples:

HTML

<div class="grid-contain">
  <div>1</div>
  <div>2</div>
  <div style="background-color: salmon; color: white; grid-row: 1 / 5;">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

CSS

.grid-contain {
  background-color: steelblue;
  padding: 10px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto auto auto auto;
}

.grid-contain > div {
  background-color: aliceblue;
  text-align: center;
  padding: 15px 5px;
  font-size: 18px;
}

Result

In this example, the third grid item starts at the first row and spans to the fifth row, showing how grid-row controls both the start and end positions of a grid item.

Example 2

HTML

<div class="grid-container">
  <div>1</div>
  <div style="grid-row: 2 / 4;">2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 10px;
  background-color: #eee;
  padding: 10px;
}

.grid-container > div {
  background-color: #ccc;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Result

In this example, the second grid item starts at the second row and spans to the fourth row, showing how grid-row sets the placement and span of a grid item within the grid container.

Using Grid-Row for Flexible Grid Layouts

Example

HTML

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end row3-start] 1fr [row3-end row4-start] 1fr [row4-end];
  grid-gap: 10px;
  background-color: lightgray;
  padding: 10px;
}

.grid-container > div {
  background-color: coral;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.item4 {
  grid-row: row2-start / row4-end;
}

Result

In this example, .item4 starts at the row2-start line and ends at the row4-end line, showing how custom identifiers can be used with grid-row to place grid items.

Combining Integer and Custom Identifier

HTML

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end row3-start] 1fr [row3-end row4-start] 1fr [row4-end];
  grid-gap: 10px;
  background-color: lightgray;
  padding: 10px;
}

.grid-container > div {
  background-color: coral;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.item2 {
  grid-row: 2 row2-start / row4-end;
}

Result

Here, .item2 starts at the second row and the row2-start line, and ends at the row4-end line. This demonstrates combining an integer and a custom identifier with grid-row.

Repeating Rows

HTML

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 10px;
  background-color: lightgray;
  padding: 10px;
}

.grid-container > div {
  background-color: coral;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.item2 {
  grid-row: 2 / 4;
}

Result

In this example, .item2 starts at the second row and spans to the fourth row, showing how grid-row can be used to define the placement and span of a grid item.

Browser Support

The grid-row CSS property is widely supported across many devices and browser versions. Here’s a summary of the browser support:

• Google Chrome: Supported since version 57.0 (March 2017)
• Microsoft Edge: Supported since version 16.0 (September 2017)
• Mozilla Firefox: Supported since version 52.0 (March 2017)
• Safari: Supported since version 10.1 (September 2016)
• Opera: Supported since version 44.0 (March 2017)

This broad support ensures that developers can confidently use grid-row to create responsive and adaptive grid layouts.