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.

Base method

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.

HTML

CSS

.site {
    display: grid;
    grid-template-column: 2fr 1fr 1fr;
}

Result

Base Method Live CodePen Example

List Method

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)

HTML

<ul class="common-list">
   <li class="common-list-item">1</li>
   <li class="common-list-item">2</li>
   <li class="common-list-item">3</li>  
   <li class="common-list-item">4</li>
   <li class="common-list-item">5</li>
   <li class="common-list-item">6</li>  
   <li class="common-list-item">7</li>
   <li class="common-list-item">8</li> 
</ul>

CSS

.common-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

Result

List Method Live CodePen Example

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 about CSS Grid Functions and New Values in the post “Becoming a CSS Grid Ninja”.

HTML

<ul class="grid">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>  
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  ... /*more items*/
</ul>

CSS

.container {
    display: grid;    
    grid-template-columns: repeat(auto-fit, minmax(300px , 1fr));
}

Result

Numbers of columns in a row
depends on screen size

Dynamic List Method Live CodePen Example

Positioning Method

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.

HTML

<div class="site">
  <header class="mastheader">.masthead</header>
  <h1 class="page-title">page title</h1>
  <main class="main-content">MAIN CONTENT</main>
  <aside class="sidebar">sidebar</aside>
  <footer class="footer">main footer</footer>
</div>

CSS

.site {  
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 2fr 2fr;
}
.masthead {
   grid-column-start: 2;
   grid-column-end: 4;
   grid-row-start: 2;
   grid-row-end: 3;
}
/** OR **/
.masthead {
   grid-column: 2 / 4;
   grid-row: 2 / 3;
}

Positioning Method Live CodePen Example

Areas Method

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!

Areas Method Live CodePen Example

Carousel Method

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:

grid-auto-flow: column;

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.

HTML

<div class="site">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   ...
</div>

CSS

.site {
   display: grid;
   grid-auto-flow: column;
}

Result

Carousel Live CodePen Example

Summary

That’s all,
I hope you’ve enjoyed this article and learned from my experience.
If you like this post, I will appreciate applause and sharing :-)

More of my posts on CSS Grid:
Becoming a CSS Grid Ninja!
Supporting CSS Grid in Internet Explorer
CSS Grid for Beginners

More of my posts on CSS:
CSS Architecture for Multiple Websites With SASS
Responsive Design Best Practices for Big Projects

I am Elad Shechter, Web Developer specializing in CSS & HTML design and architecture, working at Investing.com.

You can contact or follow me:
My Twitter
Facebook
LinkedIn

You Can find me in my Facebook groups:
CSS Masters
CSS Masters Israel