Creating Flexible Grids with Flex Units
Here we've used flexible length units or flex units to define the size of our grid columns, e.g.: grid-template-columns: 3fr 2fr 1fr. Flex units indicate to the browser what fraction or proportion of the leftover space in a grid container should be allocated to each grid item.
Related specification: CSS Grid Layout Module Level 1.
Grid item A
Grid item B
Grid item C
Grid item D
This grid item contains more content than its siblings. As a result, it also affects the size of this track (its row, in this case). Notice that all of the boxes in this row are the same height.
Grid item E
Grid item F
Grid item G
Grid item H