css grid-template-columns fr code example

Example 1: css grid repeat

repeat(/*Number of repeats*/, /*Code to be repeated*/)

.gridContainer {
	grid-template-columns: repeat(4, 100px); /*Creates 4 columns, each 100px in width*/
	grid-template-rows: repeat(2, 250px); /*Creates 2 rows, each 250px in height*/
}

Example 2: what are the units used in css grid

the units used in css grid are as follows:
  1) fr: sets the column or row to a fraction of the available space.
  2) auto: sets the column or row to the width or height of its content 
            automatically.
  3) %: sets the column or row to the percent width  of its container.

Tags:

Misc Example