<https://codepen.io/dye/pen/LyRJym>

In this layout, I want to have a sort of divider between 2 sections of a grid layout. The number of items in either section are unknown and dynamic. What's the best way to go about this? I've added a divider that I want to start at the first column line and end at the last column line. However, I don't know how to select the last line.

Currently, I have

```
.grid-item--divider {
  grid-column: 1 / 5;
}

```

This looks great when the browser is sized to display 4 columns. But when the browser is resized and the the number of columns are increased/decreased, the layout breaks. How can I always select the last column line? Or is there a better practice for accomplishing this that doesn't involve using a divider?

\*Note: My previous approach was to have 2 grid containers, one for each section. But because of the dynamic nature of the layout, the columns of both section would not necessarily line up. Ideally, I want the columns to match even if, e.g., one section only had one item while the other section had many items.

Thanks!