As the title says A Deep Dive into CSS Grid, I’m not gonna explain the basic of CSS grid rather in this post I’ll try to explore almost all features and properties of CSS grid.
Recap: CSS grid allows us to divide a webpage into rows and columns with simple properties to build complex layouts as well as small user interfaces using CSS only, without any change to the HTML.
Let’s dive in detail..
Property: display
To make an element a grid, set its display property to grid.
.to-be-grid {
display: grid;
}
Doing this makes .to-be-grid a grid container and its children grid items.
Property: grid-template-columns
We can create columns by using the grid-template-columns property. To define columns set this grid-template-columns property to column sizes in the order that you want them in the grid to appear. Let’s have a look:
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
}
This defines 3 100px width columns. All grid items will be arranged in order, in these columns. And the row height will be equal to the height of the tallest element in row but this also can be changed with grid-template-rows.
Property: grid-template-rows
It is used to define the number & the size of rows in a grid. It is similar in syntax to grid-template-rows.
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
Only the grid-template-rows property without grid-template-columns would result in column width being same as the width of the widest element in that row.
Property: grid-template
Grid is shorthand for three properties: grid-template-rows, grid-template-columns, and grid-template-areas.
You can use it is like this:
.grid {
grid-template:
“header header header” 80px
“nav article article” 600px
/ 100px 1fr;
}
You define the template areas such as you normally would, place the width of every row on its side then finally place all the column widths after a forward slash. Like before, you’ll place all of it on one line.
Data Type:
The unit “fr” is a newly created unit for CSS Grid Layout. The fr unit helps to create flexible grids without calculating percentages. 1 fr represents one fraction of available space. The available space is divided into total number of fractions defined. So, 3fr 4fr 3fr divides the space into 4+3+4=11 parts and allocates 4, 3 and 4 parts of the available space for the three rows/columns respectively. For example:
.grid {
display: grid;
grid-template-columns: 3fr 4fr 3fr;
}
If you combine fixed units with flexible units, the available space for the fractions is calculated after subtracting the fixed space. Let’s check out another example:
.grid {
display: grid;
grid-template-columns: 3fr 200px 3fr;
}
The width of a single fraction is calculated like: (width of .grid – 200px) / (3 + 3). The space of the gutters, if any would have also been subtracted initially from the width of .grid. This is the difference between frs and %s that percentages don’t include the gutter that you define with grid-gap.
Here 3fr 200px 3fr is essentially equal to 1fr 200px 1fr.
Guess, that’s a lot for today :p Will continue remaining in part two.