Becoming a CSS Grid Ninja!
These days, most developers know CSS Grid, but there are still lots of small missing parts, unfamiliar to many of them. In this post I will try to cover all these parts of CSS Grid. I promise you will learn new stuff!
This post is divided into four parts:
- CSS Grid Functions and New values
- Secrets of Grid Lines
- The Magic of the Grid-Auto-Flow Property
- More Grid Stuff
CSS Grid Functions and New values
Repeat Function
When repeating a number of cells with the same size you can use the repeat function.
The repeat function receives 2 params, The first param is the number of the reps, the second param represents the size of a single row/column, or sizes of multiple rows/columns to be repeated.
Repeat Function Example:
.container{
grid-template-columns: 1fr 1fr 1fr;
/* Equals */
grid-template-columns: repeat(3, 1fr); /* 1fr 1fr 1fr = repeat(3, 1fr) */
}
MinMax Function
“MinMax” is a common, built-in function of CSS grid. It is used to set a range of width(grid cell) or height(grid row). The function accepts two params, which represent, unsurprisingly, the minimum & maximum values.
Example:
.container{
display: grid;
grid-template-columns: 200px minmax(200px , auto) 200px;
}
The function works best with a strict minimum value and an open, flexible maximum value, because the grid’s default behavior is to stretch to 100 percent.
Question: But what if you want it to stretch according to its content, up to a maximum value ?
Answer: Meet another new function, the fit-content() function.
Fit-Content() Function
The fit-content function accepts one param, the maximum value. A grid column/row with this property set will still take up as little space as necessary, according to its content, but no more than the maximum value.
The fit-content() function is similar to using the minmax() function, with a minimum value of 0. One key difference: The minmax() is more likely to occupy the max space allowed, while the fit-content does not occupy any more space than necessary.
Example:
.container{
display: grid;
grid-template-columns: auto fit-content(800px) auto;
}Fit-Content Codepen Live Example
Min-Content & Max-Content New Values
Min-Content & Max-Content aren't new functions, but new values which can be used in CSS, not only for CSS-grid purposes.
How does it work? As implied by its name, if you use the value min-content, the column will take the minimal space according to the content, and if you use the value max-content, the column will take the maximum space, according to it needs.
Example:
.container{
display:grid;
grid-template-columns:auto min-content auto;
/* OR */
grid-template-columns:auto max-content auto;
}Min & Max Content Codepen Live Example
Dynamic Number of Columns In a Row
Sometimes you want a dynamic number of items, according to the width of the container, with the repeat function + the two new values auto-fit & auto-fill, now you can do it.
Auto-fit & auto-fill both do almost the same thing, except for when you have less than the maximum amount of items that can fit in one row & you are working with the minmax() function.
Example:
.container{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px , 1fr));
/* Not Equal*/
grid-template-columns: repeat(auto-fit, minmax(300px , 1fr));
}Auto-fit & auto-fill CodePen Live Example
Using these values, we can create a responsive design without using any breakpoints at all!
Example with a big number of items: Dynamic Number of Columns In a Row
depends on screen size
More about auto-fit & auto-fill in this article by CSS-Tricks or in this video Incredibly Easy Layouts with CSS Grid.
Secrets of Grid Lines
The negative lines
Grid lines are the numbers of the lines of the grid. That’s easy.
However, What you perhaps didn’t know, is that these lines are represented by negative numbers as well as by positive ones, allowing you to start positioning from the end.
Let’s say for example you want to select all the columns in a row, and you don’t know how many columns you have. You can start at grid line number 1 and end it on line number -1, which will always be the last line, regardless of how many there are in your grid.
Example:
.item{
grid-column: 1 / -1;
}Another example: If you already have a grid and you want to cover all of it with a mask/popup, with negative line numbers, it’s easy to select all rows & all columns.
Examples:
.item{
grid-column: 1 / -1;
grid-row: 1 / -1;
}
Working with Negative Lines CodePen Live Example
Grid Template Areas and Grid Lines
Grid-template-areas is the easiest way to use CSS-grid. You make your template and populate the items according to the grid-template-areas map (that I’m assuming you already know).
.site{
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas:"header header"
"title sidebar"
"main sidebar"
"footer footer";
grid-gap: 10px;
}But let’s say you populate all the items in the correct places, but you want to overlap some of the grid parts, with a popup for example. What you don’t know, is that when you declare the grid-template-areas, the grid lines are named automatically. If you defined an area with the name “header”, its grid lines will be named header-start and header-end. You can refer to the “header” by its start/end lines, or just call it simply by its name — “header”.
Let’s say you want an area to overlap your grid from header to footer, You could write it like this:
.popup{
grid-column: header-start / header-end;
grid-row: header / footer;
}Grid-Area Other Use Case
Beside using the grid-area property to populate regions of grid-template-areas, it can also be used as shorthand for all grid item lines (row-start, row-end, etc.) all at once!
Example:
grid-area: 1 / 2 / 4 / 4;/* Equals to */grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 4;
grid-column-end: 4;
Magic of the Grid-Auto-Flow Property
Grid-Auto-Flow Property
When working with CSS-grid, as long as you don’t explicitly position the items, they fill the grid according to their normal order from left to right. When the first grid line is full, the next item will populate in the next row. This is the default behavior, but it’s changeable.
Default behavior:
.container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-flow: row; /*default value*/
}
You can change this default value and order the items by columns.
Example:
.container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-flow: column;
}
Carousels with grid
Let’s take the grid-auto-flow: column value a step further.
Question: Let’s say we only define display: grid; and grid-auto-flow: column; and we start to add items to the grid, what will happen?
Answer: All the items will be in one long line, because we haven't defined any rows.
Example:
.container{
display: grid;
grid-auto-flow: column;
}Carousels with Grid CodePen Live Example
With grid-auto-flow: column, you can create a carousel easily, it is the “nowrap of CSS grid”.
Galleries With CSS Grid
Another magic value of grid-auto-flow is the dense value.
Let’s make a grid with items in various sizes, and let them flow normally without defining any positioning on the items. If there is a big item that can’t fit in the row, it will go to the next row and it will create empty spaces.
See example:
.gallery{
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(10, 1fr);
}
/* more specific items styled*/
Now just add the grid-auto-flow: dense; and the magic will happen. Every new item, before trying to populate its normal position, will first search for, and attempt to populate, previously existing empty spaces in the grid.
Example:
.gallery{
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(10, 1fr);
grid-auto-flow: dense;
}Galleries with CSS Grid Structure CodePen Live Example
More Stuff in CSS Grid
Alignment Properties get shorthand
- align-items & justify-items = place-items.
- align-self & justify-self = place-self.
- align-content & justify-content = place-content.
place-items: center;
/* = align-items: center; + justify-items: center; */Summary
That’s all,
I hope you’ve enjoyed this article and learned from my experience.
If you like this post, I will appreciate applaud and sharing :-)
More of my CSS Grid posts:
The CSS Grid Methods
Supporting CSS Grid in Internet Explorer
CSS Grid for Beginners
More of my posts:
CSS Architecture for Multiple Websites With SASS
The New Responsive Design Evolution
New CSS Logical Properties!
I am Elad Shechter, Web Developer specializing in CSS & HTML design and architecture, working at Investing.com.
You Can find me in my Facebook groups:
CSS Masters
CSS Masters Israel
You can contact or follow me:
My Twitter
Facebook
LinkedIn
