Span in the named columns and rows

  • Posted January 22, 2022
  • CSS

I was reading the tutorial, about how span works. But I got confused in the last part.

This code:

.item {
  grid-column: col 2 / col 7;
  grid-row: content 6 / content 10;

It’s equivalent to this:

.item {
  grid-column: col 2 / span col 5;
  grid-row: content 6 / span content 4;

Which I don´t understand why the span adds two columns more, and 6 rows. I see that there is a relation with the first parameter (col 2 and content 6), but don’t understand the reason.


Submit an answer
You can type!ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!