Using Flex Units with Length Units
This example combines flex units and a traditional length as part of its grid-template-columns definition: grid-template-columns: 250px 2fr 1fr. Notice that the second column is about twice as wide as the third. This proportion remains consistent as long as there is enough leftover space within the container.
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