What Grid Layout in CSS ?
The CSS Grid Layout Module allows you to position elements in a Grid form in an HTML document. It makes to easily position the elements without using the legacy positioning techniques like CSS Positions and Floats. Grid is colletion of rows, columns, and gaps between them. The main difference between CSS Flexbox and CSS Grid layout is that Grid is a two-dimensional layout system for the web which means we can align elements both in horizontal and vertical direction, unlike CSS Flexbox module layout which is one-dimensional.
The general form of Grid Layout is as follows :
In this article we are going to study about some of the grid layout properties.
General Construct of Grid Layout in terms of development (code) : Like Flexbox layout module, Grid Layout modules also contains a Container as a parent element and it is going to have its child elements. Whatever properties we applies for the container they would be only applied to the container and the properties applied its child elements will be applied to its child elements.
Let's now see the properties of CSS Grid :
Properties for Parent Elements :
/* Syntax */
.container {
display: grid;
}
grid-template-columns : The grid-template-columns CSS property is part of the CSS Grid Layout specification, defining the columns of a grid container by specifying the size of the grid tracks.
/* Syntax */
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Example :
If we see the above example we have a container element named as container and 3 boxes in it. we have specified display: grid; property on the container, but nothing was happened (try to play with the above code on your local system) this is because unlike flexbox it would not be enough to only specify display property, that's why we have also specified grid-template-columns: 200px 200px 200px; which means the boxes will take up the space horizontally of 200px each and remaining place will be leaved as it is. If we have more boxes than the remaining place, then the boxes will wraps into the next line.
We can also use grid-template-columns: auto; to automatically strech to the avaiable space on line. Play with these values to get an idea on them. Along with pxel values we can also use percentages (%) and fractions (fr) we know about percentage values (%) they are normal % values used everywhere.
Here, let's try to demonstrate fraction (fr) values
/* Syntax */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Example :
We can notice in the above shown example, the three boxes has occupied equal amount of space each.
What does the fr property do?
The fraction (fr) property means** one fraction** of the availble space, fraction means one equal part of space in the available space.
The alternative syntax for writing fraction(fr) is as follows :
/* Syntax */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
We can use the repeat function. The repeat(3, 1fr) function takes two arguments, 3 - means: how many number times we want to repeat fractions and the second argument sets the how much space to be taken for a fraction, the more number you give, the more space it will take up to fit.
You can play a little bit with code to get a good understanding of these properties.
** grid-template-rows : ** The grid-template-rows property specifies the number of the rows in a grid layout.
/* Syntax */
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
Example :
Like we had for grid-template-colums , we can also use px, % and fr values for grid-template-rows these will works fine.
We can also use grid-template-rows in combination with grid-template-columns to make actual grid like layout.
Let's see an example for it,
Example :
** gap : ** The gap property allows us to set gap between rows and columns.
/* Syntax */
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 15px;
} ```
Example :
%[https://codepen.io/Vasu-Kalluru/pen/WNyzPeJ]
In the above example we have set ```
gap: 15px;
```, so it gave 15px gap between both rows and columns. The ```
gap
``` is shorthand for both ```
row-gap and column-gap
``` properties which does the same thing for us.
**justify-content : ** The justify-content property is used to align the grid items horizontally inside the container.
/* Syntax */
.container { display: grid; justify-content : space-between; /* possible values are start | center | end | space-evenly | space-between | space-around */ } ```
Example :
**align-content : ** The justify-content property is used to align the grid items vertically inside the container.
/* Syntax */
.container {
display: grid;
align-content : space-between; /* possible values are start | center | end | space-evenly | space-between | space-around */
} ```
Example :
%[https://codepen.io/Vasu-Kalluru/pen/QWxmYQY]
**grid-template-areas :** The ```
grid-template-areas
``` CSS property specifies named grid areas, establishing the cells in the grid and assigning them names. In order to use ```
grid-template-areas
``` propertry we should first need to name the grid items by using ```
grid-area
``` property. If we want leave empty the space we can use **period (.)** symbol.
/* Syntax */
.item { grid-area: myPlace; }
.grid-container { display: grid; grid-template-areas: " myPlace myPlace . "; } ```
Example :
Play a little bit with the code to get wrap around your head.
Properties for Child Eelements :
By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows.
**grid-column : ** The grid-column property defines on which column to place an item. We should manually define where to start and where to end an item.
/* Syntax */
.item-1 {
grid-column: 1 / 3;
}
and also,
/* Syntax */
.item-1 {
grid-column: 1 / span 3;
}
Example :
If we look at the above example we have 2 types of syntaxes given for box items
``` : in this case we have set the box to start on column-1 and end before column-2
```grid-column: 1 / span 3
``` : in this case we have set the box to start on column-1 and span 3 columns
> Note: The grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties.
To be more clear on it, try to practice with the above code.
**grid-row : ** The grid-row property defines on which row to place an item. We should manually define where to start and where to end an item.
/* Syntax */
.item-1 { grid-row: 1 / 3; } ```
and also,
/* Syntax */
.item-1 {
grid-row: 1 / span 3;
}
Example :
Look at the example above, the grid-row property works as same as the grid-column property works, but in opposite direction.
Conclusion :
There might some extra properties of grid are available, but we no need to know about all of them because they might not be used often in your workflow.
Practice all above mentioned properties, so that , you would be good to go.
If you want to learn more on CSS Grid Layout, Check here and here
and also want to learn CSS Grid by Playing Games, Check here
Thanks for reading the article 🤗
Happy Learning :)
