Grid

Flexible grids with the fr unit

using lengths and percentages, we can use th fr unit to flexibly size grid rows and columns.

change your track listing to the following definition, creating three lfr trak

 

.container{
 display : grid;
 grid-template-columns : 1fr , 1fr, 1fr;
}

the fr unit distributes space in proportion, therefore you can give different positive values to tracks

.container{
 display : grid;
 grid-template-columns : 2fr , 1fr, 1fr;
}

2frof the available space and the other two tracks get 1fr making the first track larger.

Gaps between tracks

the properties grid-column-gap for gaps between columns, grid-row-gap for gaps between rows, and grid-gapto set bot at once

.container{
 display : grid;
 grid-template-columns : 2fr , 1fr, 1fr;
grid-gap:20px;}