CSS grid, part 3 – grid rows

Grid rows

Grid rows are created automatically if the content exceeds the specified number of columns. For example if there are nine content elements and three columns are specified, content after the third element will drop down to a new row. This will continue on to as many rows as are necessary to display the content.

In this case the row height is determined by the content. All elements in the row will stretch to the same height as the element with the most content.

Setting the row height

The Grid-auto-rows parameter is used to control row behaviour in CSS grid.

If a fixed height is used any content will be cut off if it exceeds the set height.

/* will cut off any content */
grid-auto-rows: 200px; 

To get around this the minmax() function is used. A minimum height is set and the row will stretch to accommodate any content.

/* row height 200px minimum. row height stretches to fit the content */
grid-auto-rows: minmax(200px, auto); 

The parameter grid-template-rows can also be used to specify the number and size of rows. below four rows are specified each with a minimum height of 200px and auto fit to content.

/* 4 rows, row height 200px minimum, row height stretches to fit the content 
*/
grid-template-rows: repeat(4, minmax(200px, auto)); 

In the example below minmax() is used. The rows with no content are 200px high. The top row stretches to fit the content.

Grid gap

The grid-gap parameter can be used to space out elements. Unlike margins it will not add a gap to the edge of the page.

Leave a Reply

Your email address will not be published. Required fields are marked *