Question

Span in the named columns and rows

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.


Submit an answer

This textbox defaults to using Markdown to format your answer.

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

Sign In or Sign Up to Answer