CSS grid-row-end

The CSS grid-row-end property specifies a grid item's end position in terms of grid lines. It controls where the item ends in the grid layout.

The value for grid-row-end can be defined using a numeric value, a span value, or a specific grid line name. The end position is the point in the grid where the grid item should end.

Let's look at some examples to understand how grid-row-end works:

    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: 50px 50px;
      grid-gap: 10px;
    }

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

In this example, we have a grid container with 3 columns and 2 rows. The .item class has a grid-row-end property set to span 2, which means that each item will span two rows in the grid. As a result, each item will take up two rows in the layout.

Now, let's see how we can use specific grid line names with grid-row-end:

    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: 50px 50px;
      grid-gap: 10px;
    }

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

In this example, we have set the grid-row-end property to a specific grid line name row-end. The grid will automatically end the item at the specified row line, which gives more control over the layout.

By understanding how grid-row-end works, you can effectively position grid items within the layout according to your design requirements.