CSS grid-column-end

The grid-column-end property in CSS specifies where an element should end inside a grid container. It works in combination with the grid-column-start property to define the size of the grid item, creating a column grid line to span to.

Here is an example of how to use the grid-column-end property:

Result:

Item 1

Item 2

In the example above, we have a grid container with three columns. The first item spans from column 1 to column 3, while the second item spans from column 2 to column 4.

Here is the HTML and CSS code for the example above:


<div style="display: grid; grid-template-columns: auto auto auto; grid-gap: 10px; background-color: #f1f1f1; padding: 10px;">
  <div style="grid-column-start: 1; grid-column-end: 3; background-color: #2196F3; padding: 10px;">Item 1</div>
  <div style="grid-column-start: 2; grid-column-end: 4; background-color: #4CAF50; padding: 10px;">Item 2</div>
</div>

Feel free to experiment with different values for the grid-column-end property to see how it affects the layout of your grid items.