A lot of newbies to web development, don’t get it from the first time working with CSS grid. And that is the reason why I decided to write this article, besides that, I also want to give a brief intro to CSS grid and try to explain to people who are new to CSS, how to work with this amazing feature in the simplest way possible.
So let’s start with the question of why the CSS grid exists in the first place and what it is actually?
What really is CSS Grid?
Usually, when it comes to developing web sites I actually used to draw mock-ups on papers. So here is a mock-up that I was trying to do in different system views ( I mean by system view: Desktop view, Tablet view, and mobile view ).
Here is a definition of a CSS grid system:
CSS Grid Layout is a two-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a one-dimensional system (either in a column or a row). A core difference between CSS Grid and Flexbox is that — CSS Grid’s approach is layout-first while Flexbox’s approach is content-first.
Enough of speaking about why and what is a Grid system. And let’s see how to work with the CSS grid System.
How to work with CSS Grid?
From my point of view, the best and easiest way to work with the CSS grid is to use the magical grid property “grid-template-areas”. but before jumping into that, we need to understand first how the CSS grid is structured and get familiar with some technical words. Grid systems usually have a grid container and grid items. A grid container is the HTML element that has a display property of grid “display: grid”. and a grid item is every element that a direct descendant of that element.
There are a few bits of terminology that are introduced by the Grid Layout specification. I’ve explained them here as they will make the examples easier to follow.
Grid Lines are the lines that make up the grid. These can be horizontal or vertical. We can refer to them by number, or by name.
A Grid Track is a space between two Grid Lines, either horizontal or vertical.
A Grid Cell is a space between 4 Grid Lines. So it is the smallest unit on our grid that is available for us to place an item into. Conceptually it is just like a table cell.
A Grid Area is any area on the Grid bound by four grid lines. It may contain a number of Grid Cells.
After these simple terminologies let’s see how we can work with this amazing layout.
Here is how:
let’s return back to our magical property that I have mentioned before. so to start with the CSS grid. we use “display: grid”, and we define our columns and rows, then after that, we use that magical property to draw our areas as shown in the code below :
gird-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr) 100px;
“header header header header header header”
“main main main . sidebar sidebar”
“main main main . sidebar sidebar”
“ . footer footer footer footer . “;
With this property, we are drawing the grid areas by specifying for each grid cell what area it will take.
“I know, I know I got you, some of these properties are new to you I will explain don’t worry “
is a CSS grid function, that allows us to instead of repeating many values of columns and rows sizes. to just type in repeat n times that value. in other terms, it makes sure that we don’t repeat our self’s, so instead of typing “300px 300px 300px” we can type “repeat(3, 300px)”.There is a new unit of measure in CSS introduced with CSS grid called fraction ( fr ), this unit allows us to share space based on the extra space. Here is a YouTube video that explains it.
Let’s continue, so in grid-template-areas we kind of have defined some areas that we will be used later by the grid items in order to align there self’s in them. Now let’s see how a grid item should look like.