With CSS Grid you can create two-dimensional website layouts in half the time you normally would.
CSS Grid is the successor to the float layout system, and though there are still instances where using the float layout structure might prove to be more practical than using CSS Grid, some developers tend to only use CSS Grid to structure their websites.
This is no surprise as CSS Grid is a powerful tool to have in your arsenal. This guide will teach you how to use CSS Grid in all your web development projects.
How the CSS Grid System Works
CSS Grid (or just Grid) is essentially a two-dimensional website layout system that is used to structure the elements on a web page. The CSS Grid layout system is built on a parent-child concept, where you would have one main container (the parent) and several different grid-items (the children) within that container.
To use CSS Grid on any website you will first need to initialize the Grid container. This is done by setting the display property of the intended parent element to the value of grid.
CSS Grid Container Example
selector {
display: grid;
}
The selector can be an HTML element, a class, or an id; the important thing is that it directly identifies the HTML element that encloses all the other HTML elements on the web page.
In a grid layout structure, all the elements within the container are referred to as grid-items. By default, the CSS Grid layout is vertical (which is also the default layout structure in HTML), so when a CSS grid is initialized using the display property above the layout of the grid-items will remain the same (vertical).
To rearrange the grid-items on the webpage you will need to use the grid-template-columns property, the grid-template-rows property, or a combination of both.
This is why CSS Grid is identified as a two-dimensional layout system; it allows you to structure your grid-items both horizontally (rows) and vertically (columns) at the same time.
Using the Grid-template-columns Property
The grid-template-columns property should always be used within the container element alongside the display property. With the grid-template-columns property, you can specify the number of columns you want in your CSS Grid layout, in one of several ways.
One way you can structure your grid items is by using pixels (px).
Structuring Grid-items With Pixels Example
.gridContainer {
display: grid;
grid-template-columns: 400px 400px 400px;
}
There are two things that you need to make note of in the example above. The first is that using the code above will create three columns with a width of 400px each on your web page. If you have less than three grid-items in your container then you will only have one or two columns being displayed on your screen.
However, if the number of grid-items in your container exceeds three, each group of three grid-items will be placed on a new line, until they are finished.
The second thing to note is that using px values to structure your grid-items is not a very practical approach. This is mainly because the pixels unit does not support responsive design.
Go back to the example above; if we had six grid-items in our container the two grid-items to the left would not be immediately visible on a tablet.
A recommended alternative to using px (or any other fixed value) to layout your grid-items is to use fractions (fr units).
Using Fraction Values Example
.gridContainer {
display: grid;
grid-template-columns: 1fr 2fr;
}
The code above will generate two columns on the intended web page. The column on the right will be twice as wide as the one on the left. The main reason why using fr is recommended is because fr supports responsiveness.
Therefore, whatever the screen size on a device is, the column on the right will always be twice as large as the one on the left.
This layout is popular in instances where there is an aside section on a webpage. The smaller size column would be reserved for the aside section, which would contain content that is related to but not a part of the main flow (such as a table of content).
Using the Grid-template-rows Property
The criteria for using the grid-template-rows property are somewhat identical to that of the grid-template-columns property.
One obvious difference is that where the grid-template-rows property creates rows, the grid-template-columns property creates columns. However, there are other more subtle differences between the two properties (such as the implicit rows and the overall row structure).
The Row Structure
Going back to the using fraction values example above, if that code is used on more than two elements the extra elements will wrap around creating additional rows with two columns until all the elements are in the grid.
This is not the case with the grid-template-rows property. Consider the following example.
Grid-template-rows Example
.gridContainer {
display: grid;
grid-template-rows: 1fr 3fr;
}
If the CSS code above is made to target an HTML document that contains five <div> tags that are each direct children of the gridContainer class element, then the first element will hold its default height, and the second element will have a height that is three times the size of the first.
The problem becomes apparent when you reach the third div element; you will find that instead of wrapping around and creating a second column, the rows will continue uninterrupted down the screen. These rows are referred to as implicit rows because they will remain unaffected by the code above and continue to retain their default height.
These implicit rows can be targeted using the grid-auto-rows property.
Using the Grid-auto-rows Property
The grid-auto-rows property is often used to assign height to rows in a grid that falls outside of the range of the grid-template-rows property.
Grid-auto-rows Example
.gridContainer {
display: grid;
grid-template-rows: 1fr 3fr;
grid-auto-rows: 3fr;
}
If the CSS code above is used to target a container that directly encloses five grid-items the grid-template-rows property above will apply to the first two grid-items, while the grid-auto-row property will apply to the other three elements—effectively solving the implicit rows problem.
Though you can use the grid-template-row and grid-template-columns separately when needed, it is recommended that you use the CSS Grid when two-dimensional layouts (rows and columns) are required. If the need is only for a one-dimensional layout (rows or columns) then a float layout structure would be a much better option.
Structuring the Layout of Your Website Has Never Been Easier
With CSS Grid you can create a two-dimensional Website, built on a parent-child concept. The things you need to remember to make this possible include:
- Assigning the grid value to the display property in the container element.
- Using the grid-template-rows and grid-template-columns within the container element.
- Using the grid-auto-row property when the amount of elements in the container element surpasses what the grid-template-rows property targets.
The final takeaway is to ensure that you effectively using the CSS Grid on two-dimensional layout structures. When a one-dimensional layout structure is required the float layout structure might prove to be a better option.