What is CSS Grid and How Does it Work?
Have you ever went onto a beautiful website and wondered why certain tables are aligned the way, or at least, be able to adjust as the user stretches or minimize the screen?
In CSS, there are generally a few ways to do it:
- flex-box
- CSS grid
- media query
All these properties allow HTML elements to be ordered in a different horizontal/vertical format as well as adjusting its width/height according to the screen size.
Interesting right? Today we will go through CSS grid, which combines the benefits of what flex-box and media query offers.
What is CSS grid?
CSS grid is a layout method designed to allow two-dimensional nodes to be sorted in a customized manner, vertically and/or horizontally.
Let’s say we have 6 items, with 2 rows and 3 columns:
Looks neat, doesn’t it? Now let’s take a look at the HTML and CSS that generates this:
Here is the CSS file:
Over here, we have 6 elements and if we want to use CSS grid, we set display: grid. We set this property on the parent div that contains the list of grid elements.
Inside there, we also set our grid-template-columns property. Grid template column allows us to define with a given number of items, how many items are we displaying per row, and their width.
For example, I set grid-template-columns to be 100px 100px 100px. This means I want three items with the width of 100px.
Furthermore, I also set grid-template-rows: 100px 90px. This statement assumes there are two rows, with the first one being set to a height value of 100px, the second row being set to a value of 90. Note that this sets the size but not the number of elements that show up on each row.
I guess it’s fine if we are setting a few items in each row. What if we want to set up 20 rows? Based on what we covered so far, we will have to write grid-template-columns: 100px 100px 100px 100px 100px 100px 100px… and so on until there are 20 100px.
Ouch! Imagine how long the statement would look like in the CSS file? It would be horrible to read and for sure I won’t want to write that.
What should we do if we still want to render 20 rows?
Luckily, we have a repeat property in CSS to represent a repeating fragment of a CSS rule, written in the following pattern:
What if we want the rows in the middle of the rows the same width, but we want the row in the first one and the last one to look different? Instead of calling grid-template-columns: repeat(4,100px) we can call grid-template-columns: 50px repeat(2, 100px) 200px. This is how it will look like after the change:
What if we don’t want to set a fixed size to each element in the row but have them adjust their size to the screen?
Here’s an example:
With 1fr 2fr 3fr, we set rows to take 1 fraction unit of the page, 2 fraction unit as well as 3 fraction unit of the page.
Okay…what does that mean? It means given a screen size, the first item will take 1 fraction of the screen size, the second one taking 2 fractions of the remaining space, and so on.
To understand how that looks like, take a look at the following screenshot:
CSS grid also supports how items can be displayed differently, via the justify-content property:
Here is how it will look like:
Here is one more interesting question: what if we want to customize how many rows/columns an item will take within a grid? What if we want an item to span or take a customized amount of space before displaying everything in a grid order?
Let’s take a look at the following CSS:
and the following HTML to demonstrate the grid line principle:
Above after we have set up the grid properties layout for the wrapper div, we have 3 rows and 3 columns base on .wrapper css setting.
Now we have a new CSS property that points to div class=”number one”, with the .number.one CSS rule.
Over here, we have grid-column-start that begins at column 1 and ends at 3. (grid-column-start: 1; grid-column-end: 3;) We also got grid-row start that begins at row 1 and ends at 3.
As a result, the first number element will take over the spot for the first column and second column, as well as the first row and second row. Afterward, the rest of the items will display in a grid format, using the remainder of the spaces left.
There are more to CSS grid but this article will cover most of the basics you will need to know to use CSS grid.
