A negative one

Did you know that you can use negative line numbers to position grid items with CSS Grid? It’s actually quite handy. As you probably know, you can place items along starting lines, counting from the left and spanning over a specified number of lines or columns. But what if you want to place items from the right? How can you do this in an easy way? You could count your items and place them according to the column in the grid, but that sounds like too much fuss. Instead, look at this.

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}
.grid-item {
  grid-column: span 6 / -1;
}

This means that the child in the grid will always start at the last line of the grid, covering the last 6 columns.

Pretty nice, isn’t it?