CSS preprocessors are awesome, they’ve revolutionised CSS authoring. Writing cross-browser CSS today is a lot easier because all vendor prefixes and browser hacks can be abstracted away into mixins, placeholders and what have you. For a while this was more than enough, but because we are obsessive, mentally deranged control-freaks we want more. Always more.
Posts By: Renat
grid-rows / grid-columns
The grid-rows and grid-columns properties are the primary CSS properties for establishing a grid layout, once the element is a grid context (display: grid;). Here’s an example derived from Microsoft’s documentation: .grid { display: grid; grid-columns: auto 100px 1fr 2fr; grid-rows: 50px 5em auto; } This defines the number of rows/columns in the grid as
grid-row-span / grid-column-span
The grid-row-span property defines the number of rows the item will occupy. If not specified, the item will only occupy its own cell. A positive value will expand the item to next rows. The grid-column-span property is the same except it extends an item across multiple columns. If you’re familiar with <table> layout, think of
grid-row-align / grid-column-align
The grid-row-align property defines the vertical alignment within the row while grid-column-align defines the horizontal alignment within the column. .grid { grid-row-align: start | end | center | stretch [DEFAULT: stretch]; grid-column-align: start | end | center | stretch [DEFAULT: stretch]; } If not specified, the item will occupy the whole cell. If any of