The col-span-{n}
directive might generated nonstandard css.
#13297
ZacharyBear
started this conversation in
Kind words
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
The problem
When I use
col-span-3
, it had a css likegrid-column: span 3 / span 3
.Legal cases
I research about
span
keyword, there're 3 legal use cases:grid-column: span n
: The item spans n column(s) forward from its position.grid-column: n / span m
: The item spans m column(s) forward from the column n.grid-column: span n / m
: The item spans n column(s) backwards from the column m.When I saw the
span 3 / span 3
, it looks so wired. Actually, if you write thegrid-column: span n / span m
, thespan m
will be ignored, it works likegrid-column: span n
.I had a grid layout show on the codepen, you can check the part "More span" at the end, It shows how does the
span
work.Finally
Even though,
span n / span m
works correct on the browsers, but 2span
use look so weird. So it is meaningless.How about use
span n
to replace 2span
?Beta Was this translation helpful? Give feedback.
All reactions