Question

Span in the named columns and rows

  • Posted January 22, 2022
  • CSS

I was reading the tutorial https://www.digitalocean.com/community/tutorials/css-css-grid-layout-span-keyword, 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.

Subscribe
Share

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!