There are many ways to style your website, and today I'm going to give a brief introduction to styling using CSS Grid layout. CSS grid provides you with a modular and dynamic way to layout your website. We'll start with a simple 3 x 3 grid example.
Getting started with
The first thing you need to do to get started with CSS grid is to select the element you would like to turn into a grid and give it a display property of
display: grid;. This will be the parent element, which you can think of as the outer container of the grid. All of its child elements can then be placed in the columns and rows you define within the grid.
The next step is to define how many rows and column you would like to give your grid and what size they should be. A common choice for size is to use
fr, a fractional unit which represents a fraction of the available space in the grid container.
For the columns we will give the container a property of
grid-template-columns and then specify the size of the column using
fr. A column will be created for each size declared. If we wanted three columns, with the middle column taking up half the space, we would set the property as
grid-template-columns: 1fr 2fr 1fr;.
We can specify the rows in a similar fashion using
grid-template-rows. If we wanted three identically sized rows we could specify the row size to repeat three times at the size of
repeat() notation like so:
grid-template-rows: repeat(3, 1fr);
Now that we have our grid container set up we can place its child elements anywhere we specify in the grid using the
In our 3 x 3 grid example if we wanted to place a specific child element in the center of the grid at column two - row two we would select the element in our css and give it properties of:
Grids within grids
Child elements of grids can also be grids themselves. It is possible to have multiple layers of grids, each with their own specific column and row sizes. Another use case for giving child elements the
display: grid; property is to gain access to the place-items property. This is a handy shortcut for aligning and justifying an elements content in one line. using
will center any items within that grid.
There are many, many other use cases and properties for CSS Grid Layout, but if you know the basics laid out above then you are on your way to creating orderly, dynamic websites! You can checkout more about CSS Grid at the MDN docs here.
Top comments (0)