CSS Grid for Beginners

Intro

These days, CSS Grid appears in most tech websites, yet developers are still afraid to use it.

Many of us web developers, still hold the misconception that new features in the web take ages to mature, but this isn’t the case anymore.

These days all the the major web-browsers get auto updates, chrome + firefox + edge get new updates every 1.5–4 months, including their mobile versions. Safari gets updated once a year, along with OSX/iOS.

This means that we no longer have to wait ages for new features to have support. CSS Grid isn’t an exception, it is supported in all major browsers, including Internet Explorer 11 (with some prefixes and a few syntax changes).

In this post I will teach you how to start working with CSS Grid in small, easy steps.

CSS Grid Basics

Lets take a quick look at grid terminology and start working with it.

Grid Container
As its name suggests, it is the container of the grid. When declaring display:grid, all the directly nested element children get affected (the same as in flexbox).

Grid items
Are the directly nested elements of a grid container.

CSS

.grid-container{
    display: grid;
}

HTML (Grid Container + Grid Items)

<div class=”grid-container”>
    <header class=”main-header”></header>
    <main class=”main-content”></main>
    <aside class=”main-side”>
       <!-- doesn’t effected!!! -->
       <div class=”child-of-child”></div>
       <!-- doesn’t effected!!! -->
</aside>
    <footer class=”main-footer”></footer>
</div>

All the nested HTML tags in the .grid-container are the grid items ( .main-header, .main-content, .main-side, .main-footer ).

Grid columns
When working with grid, we define the number of column in a row. We define it with the property grid-template-columns. Each column gets a size value, see example:

HTML

<div class="site">
  <div>1</div>
  <div class="main">2 - auto value</div>
  <div>3</div> 
</div>

CSS

.grid-container{
    display: grid;
    grid-template-columns: 300px auto 300px;
}

Result

Basic CSS Grid Example with CodePen

Grid Rows
We can define rows in a grid, but it is important to remember that if we don’t define any rows, we still get rows with auto height, with the amount of columns according to the grid columns we have defined. Most of the times we will prefer not to set any grid rows! (grid-template-rows)

CSS — how to set grid rows example

.grid-container{
    display: grid;
    grid-template-columns: 300px auto 300px;
    grid-template-rows: 50px 700px 50px; /*the height of the rows*/
}

Grid Cell
Every column in every row is called a grid cell.
Notice! All grid items automatically populate the grid cells according to the columns we have defined.

Grid Lines
When defining the columns and rows we get grid lines: horizontal and vertical lines that make up the grid.

With these lines we can position grid items. There are two properties that are called grid-row & grid-column, but we will focus on that in my next post, titled “CSS Grid Methods” (for intermediate level) and how to use it.

Before we continue — meet the Fraction Unit

The fr (fraction) unit is a proportional unit that was added with CSS grid, we use it to calculate ratio between cells or rows.

fr unit example:

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

Grid Gap
Grid gap is the empty space between grid rows and columns.

CSS

grid-column-gap: 10px;
grid-row-gap:    10px;
/** Or in shorthand = **/
grid-gap:        10px;

Grid Areas
After declaring grid columns we can define grid-template-areas.
grid-template-areas is a way to give names to your grid areas so you can find and use them more easily. I call it my “grid map”.

HTML

CSS — Grid Areas Mapping

After we create the map, we need to reference grid items according to the map, with the property grid-area. Let’s see an example:

CSS — Reference Grid Items to Grid Areas Mapping

Result

We are finished! we have easily created a complex CSS Grid!
Areas Method 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 CSS Grid posts:
The CSS Grid Working Methods (Intermediate Level)
Becoming a CSS Grid Ninja! (High Level!)
Supporting CSS Grid in Internet Explorer

Or my others CSS post:
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 find me in my Facebook groups:
CSS Masters
CSS Masters Israel

You can contact or follow me:
My Twitter
Facebook
LinkedIn

Credit

A lots of the examples in this post were taken from the amazing video by Morten Rand-Hendriksen, “CSS Grid Changes Everything”, really worth watching :-).