Building Awesome Layouts with CSS Grid
CSS grid layout or CSS grid is a technique in CSS that allows web developers to create complex responsive web design layouts more easily and consistently across browsers (Safari, Chrome, Firefox, Edge…….).
We’ll be talking about the very basics of CSS Grid leaving out everything you shouldn’t care about until you’ve understood how it works.
Before we dive into the CSS Grid, let's take a quick glance at the CSS display property which is very important while using the CSS grid. The display CSS property specifies the type of rendering box used for an element. We’ll be talking about the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid.
display: valuewhere value can be “grid(generates block-level grid), inline-grid(generates inline-level grid), and subgrid(when nesting grids in another grid)”. We’ll be using display:grid; throughout the article.
Time to make our first grid.
<div class="wrapper">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
<div class="grid-item">C</div>
<div class="grid-item">D</div>
<div class="grid-item">E</div>
</div>//We are going to be working with this HTMl throughout.
We are going to use the display property to turn our .wrapper div into a grid and give it some space with the grid-gap property.
.wrapper {
display : grid;
grid-gap : 10px;
}
.grid-item {
background-color : green;
}
Grid Gap
The grid-gapproperty is used to create space/gutter between grid-items.
/*Creates a 10px gutter between grid rows and columns*/
grid-gap: 10px;
/*Creates a 5px gutter between grid rows.*/
grid-row-gap: 5px;
/*Creates a 5px gutter between grid columns.*/
grid-column-gap: 5px;
/*Creates a 5px gap between gridrows and 8px gap between grid cols*/
grid-gap: 5px 8px;POSITIONING GRIDS
Positioning grid-items using “grid-template-areas”
The first thing we need to do is to assign a name to our grid-items, the name can be anything but must not contain empty space.
.grid-item:nth-of-type(1) {
grid-area: A;
}
.grid-item:nth-of-type(2) {
grid-area: B;
}
.grid-item:nth-of-type(3) {
grid-area: C;
}
.grid-item:nth-of-type(4) {
grid-area: D;
}
.grid-item:nth-of-type(5) {
grid-area: E;
}After naming our grid-items, use the grid-template-areas to specify the position of our grid-items. Add the following code to our .wrapper{} to create a grid with 2 rows and 3 columns.
grid-template-areas:"A B C"
"D E F";
/* "A,B,C,D,E,F" are the names given assigned to our grid-items*/
In order to add an empty space between grid-items, we replace that particular grid-item we want to replace with a “.”, we can use as many “…….” as we like as far as there’s no space between the dots(“….”)
grid-template-areas:"A B ."
"C ..... D"
"... E F";
Positioning grid-items using “grid-template-columns”
The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns😴😴😴. In other words, it is used to set the number and size of columns we want our grid to possess😎😎😎 . Unlike using grid-template-areas, we don’t need to name our grid-items.
Let’s say we want our grid to have four columns whereas, the first column is 100 pixels, the second is 200, and the third and fourth should take up the remaining available space evenly.
We can achieve this by 👇👇👇
.wrapper {
grid-template-columns: 100px 200px auto auto;
}
Let's play with this a little. We’re gonna make “E” to span 2 columns making “F” to be directly below “C”. In order to achieve this, Let me introduce you to grid-column: X / Y; where X and Y are the starting and end position of the grid-item respectively.
grid-item:nth-of-type(5){
grid-column-start: 1; //starts at the beginning of the first column
grid-column-end: 3 or span 2; /* ends at the beginning of the third column or span 2 columns*/
}
or
grid-item:nth-of-type(5){
grid-column: 1 / 3 or 1 / span 2;
}
Positioning grids using “grid-template-rows”
.wrapper {
/* sets row 1 and 2 to 100px and 200px, and the rest to auto*/
grid-template-rows: 100px 200px auto;
}
Using minmax() to specify dynamically sized tracks
In a situation whereby we want the size of our grid column or row to be dynamic, we can use minmax(minValue, maxValue).
minmax(10px, 20px) means the grid-item cannot not be less than 10px and cannot be bigger than 20 px.
grid-template-columns: minmax(min-val, max-val);/* val can be “px, auto, %, fr, min-content, max-content”*/grid-template-columns: minmax(10px, auto)
minmax(4fr, 20%)
minmax(min-content, max-content) ;
min-content and max content: Keyword representing the smallest and largest content contribution of the grid-items occupying the grid.
Using Repeat function to write grid-template-values
In a situation where we have over 10 grid-items, it’s not smart of us to start naming sizing our grids one after the other instead, we can use repeat(noOfGrids, size(s)).
grid-template-columns: {
repeat(3, 1fr 2fr 4fr);
/*creates set of grids sized 1fr 2fr 4fr in that order till it gets to the last grid-item*/
}
We can pass auto-fill and auto-fit as the first argument of the repeat function instead of a number e.g repeat(auto-fill, minmax(50px, auto))or repeat(auto-fit, minmax(min-content, auto));
“Its advisable to always use the minmax()while sizing our grid-items because of responsiveness.”
Changing the auto-placement behavior of grid-items
By default CSS grid arranges our grid-items in rows i.e from left to right. Sometimes we might want to arrange our items from top to bottom, that is where grid-auto-flow comes in.
The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */
You must be wondering, What the “dense” keyword does, if there is an empty space and you want the next available grid that fits into the grid to be placed there, we use the “dense” keyword.
