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
G
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
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
The grid-row and grid-column properties define which row or column an element will be displayed on. .element { grid-row | grid-column: <integer> [DEFAULT: auto]; } Important! grid-row is supposed to be a shorthand for grid-row-position and grid-row-span. The current implementation in Internet Explorer 10 for grid-row should be the one for grid-row-position (which isn’t supported). Same