Examples of using Grid Layout (with kittens)
These examples are based on tutorials by Rachel Andrew
Defining a grid
We can define a grid simply by setting the
display property to
Defining the columns is as simple as specifying the widths to the
We can do the same for the rows using the
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
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.
Using the fr unit
A problem with the above example is that the columns stay at given fixed pixel size regardless of how large the screen is. We can use the
fr unit to address this.
The fr unit stands for fractional and represents a fraction of the available space in the grid.
If we replaced the
1fr 1fr 1fr then each of the three columns will take an equal amount of space.
Notice that this time the layout is more responsive. We can view this on different widths and it takes this into account.
If we wanted the first column to be larger then we could use something like
2fr 1fr 1fr.
We can also mix fr units and standard units so times when we need to display a particular column as a fixed size. For example:
1fr 100px 1fr
Instead of explicitly stating each track we can use repeat notation to repeat a pattern of tracks. We do this by using the
repeat function in our
grid-template-rows. For example:
grid-template-columns: repeat(2, 1fr 2fr);. The first argument is how many times we should repeat this pattern. The second argument is the pattern itself.
The minmax function
The minmax function can be used for column or row templates. It determines the minimum and maximum size a track will be. This is useful for contraining a responsive layout.
We can change the display order of items by using the
order keyword. The higher the number the lower the priority. By default everything will have a priority of 0.
Auto fill and auto fit
So far we have had to specify how many columns we require. But in many situations it can be difficult to know in advance how many columns we will need especially if we are loading dynamic content. We can use the
auto-fit keywords as arguments to the
repeat function to create columns to distribute the items evenly. Auto-fill will distribute the items and if there is space left over it will fill it empty items. Auto-fit will do the same but when there is space left over it will grow the items to fit to the space.
Using span to auto place items
We can use
grid-column-end to specify which columns an item can take up. Specifying an integer will ensure the start or end will be this specific column. We can use a negative number to specify a column from the end. For example -1 will be the last column and -2 will be the one before this. We can use the
span keyword to indicate that the number specified is how many columns should take up instead of a particular column. For instance
grid-column-end: span 2 means that the item will be 2 columns from it's start.
grid-column-start: 3 means that the item will be 3 columns from it's end. The span keyword also applies to the row versions of this which are
A shorthand for using grid-column-start and grid-column-end is the
grid-column attribute. This one argument for the start and another for the end separated by a forward slash. For example:
grid-column: 3 / -1 means start at column 3 and continue until the end. The row version of this is unsurprisingly:
Now that we can specify the span of rows and columns we may end up with many variable sized items and this can lead to quite a bit of white space.
We can use the
grid-auto-flow: dense attribute and keyword which will change the order of items to ensure that they are tightly packed into the grid.
Tracks can be named by specifying the name in square brackets before the track. For example:
grid-template-columns: [sidebar] 100px [content] 300px [ads] auto [ads-end]. In this case the first column is named 'sidebar', the second is named 'content' and the last is named 'ads'. The end of the last column is also named 'ads-end'. The below example shows usage with named rows as well as columns.
Align and justify
We can use
justify-items to align items horizontally and
align-items to align items vertically. We can also use
align-self to perform alignment on specific items
Align and justify grid tracks
Aligning and justifying the grid tracks instead of the items is done by using the
align-content keywords. Justify-content will align the columns and align-content will align the rows.
Grid areas are extremely useful for laying out the grid. We can name a particular area that an item belongs too by using the
grid-area attribute. On the grid we can use
grid-template-areas to create a layout for all of these named areas.
We lay this out by writing a grid usings strings that visually represent the grid. For example:grid-template-areas:
This will create a grid with two columns and three rows placing the header over two columns with the main content and an image taking a column each. The footer will take up a single column with an empty item in the second column.
We can use content-fitting keywords to control the column and row sizes when using grid-templates.
The below example explains and demonstrates this.