How do I use the short form for css grid column and row?
-
In article How do I position css grid items inside a container? we saw the following CSS grid properties.
... grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3;A short way of writing this is The first number is for start and second for end.
... grid-column: 3 / 4; grid-row: 2 / 3;There is an even shorter way using the CSS grid-area but it can be a little confusing and harder to read. See the details at W3S https://www.w3schools.com/cssref/pr_grid-area.asp
© Lightnetics 2024