Topic: CSS Grid Layout Tutorial

MDBootstrap
staffpropremium posted 2 years ago
Introduction
In this tutorial, I explain how to create a basic website layout using CSS grid. CSS Grid is a two-dimensional grid-based layout system that let you easily arrange your website layout on a grid schema.
You will learn how to setup HTML structure, create classes for your components, prepare necessary CSS styling and prepare simple layout using CSS Grid.
Getting started
To get started you have to define a container element as a grid with display: grid.
Set the column and row sizes with grid-template-columns
and grid-template-rows
. Then place its child elements into the grid with grid-column
and grid-row
.
As you may see in the paragraph above It is important to understand grids terminology. Usage of CSS grid will be effortless after you understand the grid's attributes.
Grid elements
Grid Container
The element that has applied display: grid
. This is a component that should be a parent of all elements we plan to style inside of the grid.
Note: In the example above, the element with a class container is the grid container. You can assign display: grid
to any class and assign it later to the HTML element.
Grid item
The children to the grid container. An item that is nested directly inside the element with display: grid
.
Note: In the example above, elements with class grid-item
are the grid items. The div with class="grid-sub-item"
is not a grid item.
Grid Cell
This is the smallest part of the grid layout. The number of cells is defined by multiplication of grid rows and grid columns.
Grid Area
This is a part of layout implemented with CSS Grid. A grid area can contain any number of grid cells. This is a space surrounded by four grid lines.
Grid Line
This is a line separating grid cells. There are vertical and horizontal grid lines.
Styling with Grid
Every grid styling needs to contain defined elements.
In the example above we are using all important parts of styling a grid container.
I mentioned display: grid;
already. This is the line that enables all-important grid features.
Grid templates are the lines that define the size of defined columns and rows. You have to declare the sizes of your grid elements by defining these elements. You have to plan how many columns there will be in your grid as well as how many rows by declaring each row and column size.
You can use all known sizing units like: px
, %
, vh
, vw
but to make the grid responsive there is one more way to set its "fraction" size.
As you may be noticed I styled my columns and rows using the unit fr
.
grid-template-columns: 1fr 50px 1fr;
grid-template-rows: 1fr 1fr 1fr;
This way you can assign all left space to equally distribute it between elements that use fr unit.
When used fr redistribute equally left out space in the grid to elements depending on their share in a sum of all fr used for example if there are used two elements with 1fr they will cover 50/50 the left out space.
The grid-gap
styling is straight forward. You can set the size of a gap between your grid cells. It accepts all common sizing units except the fr one.
The most important and trickiest to understand is the grid-template-areas
. In this attribute you define how assigned your grid cells are to grid areas.
Every string used in this attribute presents each row of the grid. Every variable used inside that string represents each column.
Note: You need to remember that every single grid area has to be square-shaped, You can not assign the same area to different not connected parts of your grid area.
To properly assign your grid space you have to declare the exactly this much rows as you defined in grid-template-rows using a correct number of strings that each and every one contains the proper amount of variables assigned to the previously declared number of columns in grid-template-columns.
Note: THIS EXAMPLE WILL NOT WORK! You can not assign area1 this way.
Note: This is a proper example of a large-area example.
You can also leave the cell empty by adding simple "." in place of a variable in the row string.
grid-template-areas: "area1 . area2 " "area3 area4 . " "area5 . area6";
After setting up template areas just simply add every area variable to the desired class with the attribute grid-area.
Note: The class can be named randomly. Setting the same grid area value and the class name is just a good practice that makes code easier to understand.
This way you can create any grid layout you design.
Right now we discussed how to style your elements but you need to add them to HTML to add styling. Let's talk about that now.
HTML Structure
After we plan how our grid will look like by planning the number and sizes of every element we can create them in HTML.
Defining your grid area require to add at least 1 element with class assigned to a grid cell.
All the variables we used in grid-template-areas
that we added to classes need to be assigned to our elements in HTML.
All elements that are created this way will be assigned according to our grid-container styling.
This is that simple!
Examples
Check out our examples of grid usage here:
Conclusion
You can design whole sites with it or create parts of your design with this grid property. Elements inside your website can we assigned to display: grid
and styled inside with this CSS feature.
I explained only the basics of CSS Grid to arouse curiosity. There are many more features that this display property brings to the table. To understand it in depth you can read this CSS element documentation on one of the dedicated websites.
CSS Grid is an easy way of creating a layout on a grid scheme. After we understand and get used to it the developing process is quick and effective.
Now use this feature and create your own grids!
- Category: Web Design
- Specification: CSS Grid