The CSS Grid Methods
After gaining a lot of experience with CSS Grid, I’ve decided to share my knowledge and experience in CSS Grid methods with you.
There are a lot of ways to work with CSS Grid. CSS Grids Methods will help you get started with implementing CSS Grid quickly and easily.
This post is mainly for developers who are already familiar with CSS Grid at a basic level, if you aren’t familiar with CSS Gird, read first CSS Grid for Beginners.
The basic way to create a grid is to declare grid-template-column. This property determines the number of items in a row.
The Grid items will automatically populate the grid container from top left to bottom right, based on the HTML source order, and will add rows as necessary.
grid-template-column: 2fr 1fr 1fr;
Using the “base method” and the repeat() function, we can easily achieve a list sequence of items.
(The amount of items in a row can be easily to determined for every responsive design breakpoint)
grid-template-columns: repeat(3, 1fr);
Dynamic List Method
This is similar to the “List Method”, except that in the “Dynamic List Method”, the number of items in each row is dynamic, and may change according to the width of the view-port.
We achieve this by using 2 new functions of CSS Grid, the repeat() function and the minmax() function, and the new values auto-fit or auto-fill and the stretching fraction unit(fr).
In this example, we repeat (repeat() function) one column size with the minmax() function. Every column has a minimum width of 300px, and the value for the number of repeats is set as auto-fit or auto-fill, meaning that the row will be filled with as many items as possible, with a minimal width of 300px, or more, depending on the available space (the items stretch to fill all available space).
... /*more items*/
grid-template-columns: repeat(auto-fit, minmax(300px , 1fr));
In every grid we create, we also create grid lines automatically. Using these grid lines, we can position the grid items in any square we want.
When positioning a grid item, we define 4 grid lines, grid-column-start, grid-column-end, grid-row-start and grid-row-end.
<h1 class="page-title">page title</h1>
<main class="main-content">MAIN CONTENT</main>
<footer class="footer">main footer</footer>
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 2fr 2fr;
/** OR **/
grid-column: 2 / 4;
grid-row: 2 / 3;
Areas Method is the most important grid method of all. This utilization of CSS grid is basically the main reason CSS gird was invented. It’s the easiest way to create complex grid systems.
How can you create this complex Grid?
We start by creating the grid with the “base method”, defining the grid and the columns in each row.
And now comes the fun part! We create a “CSS Map” according to the amount of columns we defined.
CSS Map & Grid Definition
We select a name for each area.
To populate these areas, we connect the grid items to the grid-area names.
Populating the Grid
HTML Grid and Grid Items
That’s it, your grid is ready to go!
This method works like a trick. In CSS grid, the default flow of the items is to create a new row when there isn’t enough space in the current row, but this default behavior is changeable, and we can change it from row to column, this way:
Let’s say we declare a grid and update the flow with grid-auto-flow: column; Without declaring any rows, all the items will be in one long line(!) because we haven’t defined any rows.
This method is the CSS grid equivalent of the no-wrap property, and it provides us with a quick and simple way of creating an image carousel, for example.
I hope you’ve enjoyed this article and learned from my experience.
If you like this post, I will appreciate applause and sharing :-)
I am Elad Shechter, Web Developer specializing in CSS & HTML design and architecture, working at Investing.com.