CSS grid-row-end Mastering Vertical Grid Layout

Introduction

The grid-row-end property in CSS helps you control where a grid item ends within a grid row. This is super useful for creating flexible and dynamic layouts. By defining the end line of a grid item’s row, you can precisely place items within your grid.

This property is widely supported across modern browsers, making it a reliable tool for web developers. It works seamlessly with other CSS Grid properties, allowing you to build responsive and complex layouts with ease.

In this article, we’ll explore the syntax, values, and practical examples of the grid-row-end property. We’ll also cover its compatibility with different browsers and answer common questions. By the end, you’ll know how to use grid-row-end effectively in your web projects.

Specification

The grid-row-end property is defined in the CSS Grid Layout Module Level 2 specification. This module provides rules and guidelines for creating sophisticated grid layouts. The grid-row-end property specifically helps you control the vertical positioning of grid items by specifying the end line of their grid area.

Understanding the specification is crucial for using the grid-row-end property effectively. Whether you’re building simple grids or complex layouts, the specification serves as a reliable reference to help you achieve your design goals.

Description

The grid-row-end property in CSS defines where a grid item ends within a grid row. This property controls the vertical span of the grid item by specifying the row line where the item should end. It’s an essential tool for web developers and designers.

By using grid-row-end, you can precisely position grid items within a grid container, ensuring they occupy the desired space. This property can take various values, including keywords, custom identifiers, and integers, allowing for flexible and dynamic layout designs. Whether you’re creating a simple grid layout or a complex design, grid-row-end provides the control you need to achieve your desired outcome.

Key Points:

• Precision: Control the exact vertical span of grid items.
• Flexibility: Use various values to create dynamic layouts.
• Compatibility: Works well across modern browsers.

Baseline Widely Available

The grid-row-end property is widely supported across many devices and browser versions, making it a reliable feature for web development. It has been available in all major browsers since July 2020, ensuring that your designs will work consistently across different platforms.

This broad compatibility means you can confidently use grid-row-end to create sophisticated and responsive layouts without worrying about browser inconsistencies. Whether you’re targeting desktop or mobile users, this property will help you achieve the desired visual outcome.

Key Points:

• Wide Compatibility: Works across modern browsers and devices.
• Established Feature: Available since July 2020.
• Consistent Behavior: Ensures your designs look the same across different platforms.

Syntax

The grid-row-end property in CSS allows you to define the end position of a grid item within a grid row. This property can be set using various values, including keywords, custom identifiers, and integers. Understanding the syntax is crucial for effectively using the grid-row-end property in your web projects.

Here’s how the syntax for grid-row-end is structured:

grid-row-end: value;

Possible Values

1. Keyword Value:

   grid-row-end: auto;

   The auto keyword indicates that the property contributes nothing to the grid item’s placement, allowing for auto-placement.
2. Custom Identifier:

   grid-row-end: somegridarea;

   If a named line exists with the name somegridarea-end, it contributes the first such line to the grid item’s placement. Otherwise, it is treated as if the integer 1 had been specified.
3. Integer Value:

   grid-row-end: 2;

   Contributes the nth grid line to the grid item’s placement. If a negative integer is given, it counts in reverse from the end edge of the explicit grid.
4. Span with Integer or Custom Identifier:

   grid-row-end: span 3;
   grid-row-end: span somegridarea;
   grid-row-end: 5 somegridarea span;

   Contributes a grid span to the grid item’s placement. If a name is given as a custom identifier, only lines with that name are counted.
5. Global Values:

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

   These values allow you to inherit the property from the parent element, reset it to its initial value, or unset it.

Example

.box1 {
  grid-row-end: auto;
}

.box2 {
  grid-row-end: somegridarea;
}

.box3 {
  grid-row-end: 2;
}

.box4 {
  grid-row-end: span 3;
}

.box5 {
  grid-row-end: 5 somegridarea span;
}

By using the correct syntax and values, you can control the vertical span of your grid items and create flexible, responsive layouts. The grid-row-end property is a powerful tool that, when used effectively, can greatly enhance the visual appeal and functionality of your web designs.

Values

The grid-row-end property in CSS can take several types of values to control the end position of a grid item within a grid row. Understanding these values is essential for effectively using the grid-row-end property in your web projects. Here are the different types of values you can use:

auto

The auto keyword indicates that the property contributes nothing to the grid item’s placement, allowing for auto-placement. This means the item will span a default of one row or follow the natural flow of the grid.

grid-row-end: auto;

<custom-ident>

If there is a named line with the name <custom-ident>-end, it contributes the first such line to the grid item’s placement. Named grid areas automatically generate implicit named lines, so specifying grid-row-end: foo; will choose the end edge of that named grid area (unless another line named foo-end was explicitly specified before it).

grid-row-end: somegridarea;

<integer> && <custom-ident>?

This value contributes the nth grid line to the grid item’s placement. If a negative integer is given, it counts in reverse, starting from the end edge of the explicit grid. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

grid-row-end: 2;
grid-row-end: somegridarea 4;

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

This value contributes a grid span to the grid item’s placement such that the row end edge of the grid item’s grid area is n lines from the start edge. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span. If the <integer> is omitted, it defaults to 1. Negative integers or 0 are invalid.

grid-row-end: span 3;
grid-row-end: span somegridarea;
grid-row-end: 5 somegridarea span;

Global Values

These values allow you to inherit the property from the parent element, reset it to its initial value, or unset it.

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

Example

.box1 {
  grid-row-end: auto;
}

.box2 {
  grid-row-end: somegridarea;
}

.box3 {
  grid-row-end: 2;
}

.box4 {
  grid-row-end: span 3;
}

.box5 {
  grid-row-end: 5 somegridarea span;
}

By using these values properly, you can precisely control the vertical span of your grid items and create flexible, responsive layouts. The grid-row-end property is a powerful tool that, when used effectively, can greatly enhance the visual appeal and functionality of your web designs.

Formal Definition

The grid-row-end property in CSS is formally defined to control the end position of a grid item within a grid row. This property specifies the inline-end edge of a grid item’s grid area, determining the vertical span of the item within the grid container. Here are the key aspects of its formal definition:

Initial Value

• Initial Value: auto
  • The default value is auto, which means the grid item will follow the natural flow of the grid, spanning one row by default.

Applies To

• Applies To: grid items and absolutely-positioned boxes whose containing block is a grid container
  • This property is relevant for elements that are part of a grid layout or are absolutely positioned within a grid container.

Inherited

• Inherited: No
  • The grid-row-end property is not inherited from the parent element. Each grid item needs to have this property explicitly set if you want to control its end position.

Computed Value

• Computed Value: As specified
  • The computed value of grid-row-end is the same as the value specified in the CSS.

Animation Type

• Animation Type: discrete
  • The grid-row-end property does not support smooth transitions or animations; changes to this property are applied instantly.

Formal Syntax

grid-row-end = <grid-line>

<grid-line> =
  auto                                             |
  <custom-ident>                                   |
  [ <integer [-∞,-1]> | <integer [1,∞]> ] [&& <custom-ident>]? |
  span [&& [ <integer [1,∞]> || <custom-ident> ]]

Explanation

• auto: Indicates auto-placement or default span.
• <custom-ident>: Refers to a named line or grid area.
• <integer> && <custom-ident>?: Specifies a grid line by its index and an optional custom identifier.
• span && [ <integer> || <custom-ident> ]: Specifies a span from the start edge of the grid item’s grid area.

By understanding the formal definition and syntax of the grid-row-end property, you can effectively control the vertical placement and span of grid items within a grid container. This property is a crucial tool for creating flexible and responsive layouts in web design and development.

Examples

Setting Row End for a Grid Item

To set the row end for a grid item, use the grid-row-end property to specify where the grid item should stop vertically within the grid container. This property is crucial for defining the layout and ensuring that grid items occupy the desired space.

HTML

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

Result

In this example, the grid-row-end property is used to control the vertical span of the grid items. The first grid item (box1) spans from row 1 to row 3, and the second grid item (box2) spans from row 3 to row 5. This demonstrates how grid-row-end can be used to precisely position grid items within a grid container.

Using Custom Identifiers

You can also use custom identifiers with grid-row-end to define named lines and grid areas.

HTML

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: [first] 100px [second] 100px [third] 100px [fourth] 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: first;
  grid-row-end: third;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: third;
  grid-row-end: fourth;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

Result

In this example, custom identifiers (first, second, third, fourth) are used to define the rows. The first grid item (box1) spans from the first row to the third row, and the second grid item (box2) spans from the third row to the fourth row. This demonstrates how custom identifiers can be used with grid-row-end to control the vertical span of grid items.

Using the span Keyword

You can use the span keyword with grid-row-end to specify how many rows a grid item should span.

HTML

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: span 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 4;
  grid-row-end: span 2;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

Result

In this example, the span keyword is used with grid-row-end to control the vertical span of the grid items. The first grid item (box1) spans three rows from its starting point, and the second grid item (box2) spans two rows from its starting point. This demonstrates how span can be used with grid-row-end to create flexible and dynamic layouts.

Try It

The best way to understand the grid-row-end property is to experiment with it. Below is a simple example to get you started.

Example

HTML

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

Result

The above code creates a grid container with five grid items. The grid-row-end property is used to control the vertical span of the first and second grid items. The first item spans from row 1 to row 3, and the second item spans from row 3 to row 5. This demonstrates how grid-row-end can be used to precisely position grid items within a grid container.

Steps to Try It Yourself

1. Copy the HTML and CSS code provided above.
2. Paste the code into your HTML and CSS files, respectively.
3. Open the HTML file in a web browser to see the grid layout in action.
4. Experiment with different values for the grid-row-end property to see how it affects the layout of the grid items.

By trying out this example and experimenting with different values, you can gain a better understanding of how the grid-row-end property works and how it can be used to create complex and flexible layouts.

FAQs

What does the grid-row-end property do in CSS?

The grid-row-end property in CSS specifies the ending row line for a grid item within a grid container. It defines where an item should stop vertically within the grid, determining how many rows the item spans. This property is crucial for controlling the vertical placement and span of grid items, making it an essential tool for creating flexible and responsive layouts.

How do I control where a grid item ends using grid-row-end?

You can control the ending position of a grid item using the grid-row-end property by specifying the row line where the item should end. For example:

grid-row-end: 4;

This makes the grid item stop at the 4th row line. You can also use the span keyword to specify how many rows the grid item should span from its starting point:

grid-row-end: span 3;

This makes the grid item span 3 rows from its starting point.

What’s the difference between grid-row-start and grid-row-end?

• grid-row-start: Specifies where a grid item begins vertically within the grid container.
• grid-row-end: Specifies where a grid item ends vertically within the grid container.

Both properties work together to define the vertical span of a grid item within the grid.

Can I use grid-row-end with the span keyword?

Yes, you can use the span keyword with the grid-row-end property to control how many rows the grid item should span. For example:

grid-row-end: span 3;

This makes the grid item span 3 rows from its starting point. The span keyword is useful for creating flexible and dynamic layouts where the exact number of rows an item should span is known.

How does grid-row-end interact with grid-template-rows?

The grid-row-end property interacts with the grid-template-rows property by respecting the sizes and definitions set for the rows in the grid template. When you specify grid-row-end, the item will stop at the appropriate row line according to the row definitions in grid-template-rows. This ensures that the item stops at the correct position, maintaining the intended layout and alignment within the grid.

What browsers support the grid-row-end property?

The grid-row-end property is widely supported across modern browsers, including:

• Google Chrome: Version 57 and above
• Firefox: Version 52 and above
• Edge: Version 16 and above
• Opera: Version 44 and above
• Safari: Version 10.1 and above

Internet Explorer does not support the grid-row-end property. For projects that require support for older browsers, additional fallbacks or alternative layout methods may be necessary.

By understanding these FAQs, you can better utilize the grid-row-end property in your web projects and create more sophisticated and responsive layouts. This property is a powerful tool for controlling the vertical placement and span of grid items, making it an essential part of CSS Grid Layout.

Supported Browsers

The grid-row-end property is widely supported across modern browsers, ensuring compatibility and consistent behavior across different platforms and devices. Below is a summary of the browser support for the grid-row-end property:

Key Points:

• Wide Compatibility: Works across all major modern browsers.
• Established Feature: Available since early 2017.
• Consistent Behavior: Ensures your designs look the same across different platforms.

Notes on Compatibility:

• Internet Explorer: The grid-row-end property is not supported in Internet Explorer. For projects that require support for older browsers, additional fallbacks or alternative layout methods may be necessary.
• Mobile Browsers: The grid-row-end property is well-supported in mobile browsers, including Chrome for Android, Firefox for Android, and Safari for iOS.

Learn More:

• Full Compatibility Details
• Report Feedback

By leveraging the grid-row-end property, you can enhance the flexibility and precision of your CSS Grid layouts, making your web projects more visually appealing and user-friendly. The broad compatibility of this property ensures that your designs will work seamlessly across a wide range of devices and browsers.

See Also

Exploring related CSS properties and concepts can further enhance your understanding and usage of the grid-row-end property. Here are some related topics and properties that you might find useful:

Related CSS Properties

• grid-row-start: Specifies the starting row line of a grid item, defining the vertical placement within the grid container.
• grid-row: A shorthand property that sets both the start and end row lines of a grid item.
• grid-column-start: Specifies the starting column line of a grid item, defining the horizontal placement within the grid container.
• grid-column-end: Specifies the ending column line of a grid item, defining the horizontal span within the grid container.
• grid-column: A shorthand property that sets both the start and end column lines of a grid item.
• grid-template-rows: Defines the rows of the grid, including their sizes and named lines.
• grid-template-columns: Defines the columns of the grid, including their sizes and named lines.

Related Concepts

• Line-based placement with CSS grid: Explains how to use line-based placement to position grid items within a grid container.
• CSS Grid Layout Module Level 2: The official specification for CSS Grid Layout, providing detailed guidelines and behaviors for grid containers and items.
• Grid Layout Tutorials: A collection of tutorials and examples to help you understand and implement CSS Grid Layout in your projects.

Video Resources

• Line-based placement with CSS Grid: A video series that explains line-based placement in CSS Grid Layout, providing practical examples and demonstrations.

Helpful Resources

• MDN Web Docs: A comprehensive resource for web developers, offering documentation, tutorials, and examples for CSS and other web technologies.
• CSS-Tricks: A community-driven website that provides tips, tricks, and tutorials for CSS and web design.

By exploring these related properties and concepts, you can deepen your understanding of CSS Grid Layout and enhance your ability to create complex and flexible layouts. Whether you’re a beginner or an experienced developer, these resources will help you master the grid-row-end property and other essential CSS Grid properties.