CoverT 16: Grid Template Columns and Rows

codeInteractive Code Example

grid-template-columns and grid-template-rows are awesome CSS properties for defining the size & number of grid columns and rows.

They can take a ton of different values (e.g. length, percentage, fr, repeat, minmax, etc.), and make it really easy to control the width and height of your grid columns and rows.


<div id="grid">
#grid {
  display: grid;
  grid-template-columns: 150px repeat(2, 50px) 300px;
  grid-template-rows: 40px repeat(2, 100px);

#grid span {
  border: 1px solid black;
  padding: 5px;
  text-align: center;


1 2 3 4 5 6 7 8 9 10 11 12