Examples of using Grid Layout (with kittens)

Defining a grid

We can define a grid simply by setting the display property to grid. Defining the columns is as simple as specifying the widths to the grid-template-columns property. We can do the same for the rows using the grid-template-rows property. If any more rows are added then we can use the grid-auto-rows property to define these heights. To specify the gap between columns we can use grid-column-gap property and for rows we can use the grid-row-gap property. If instead we want to specify both at once we can use the grid-gap property. In grid layout terminology we use the term track for referring to a row or a column.