Introduction to Grid

General experience and impression of users directly rely on design, in particular the layout of your website. Having good content and knowing how to show it properly for users to understand and easily use it is really important. CSS was always used to lay out web pages. It all started with HTML tables, then floats with positioning and inline blocks. However, it didn't provide any real solution for complex positioning. Sooner, with CSS3, the flexbox arrived with gentle and simple ways of achieving a responsive and maintainable layout. Flexbox is a great tool, but it has a one-directional flow and with CSS Grid (it's two-directional) you can achieve more. Nevertheless, they complement each other very well. As the name implies, CSS Grid operates within a grid layout: a set of rows and columns. It's an excellent tool for dealing with complex and responsive designs more easily and consistently as you'll see further on.

Grid terminology

CSS Grid is a system for laying out items across a movable set of horizontal and vertical lines. Inside a grid, we have invisible lines that divide columns and rows. The space between parallel gridlines is known as a grid track, while the space between those lines is called a grid area. A grid consists of columns and rows. A row is a set of horizontal elements, while a column is a vertical set of elements.

Grid lines

Grid lines are invisible lines separating the grid into rows and columns, which run both horizontally and vertically including the borders of the grid. If your grid has three columns, you'll have four-column grid lines including the one after the last column.

Grid lines

Grid track

A track is a space between any two parallel grid lines. A row track is a space between two horizontally aligned row lines and a column track is a set of space between two vertically aligned column lines.

Grid cell

A grid cell is the smallest space on a grid defined by the intersection of a row and a column. Imagine it as a cell in a spreadsheet.

Grid cell

Grid area

The grid area is the total space surrounded by any number of grid lines, in other words, it is a group of cells together that can be composed of any number of grid cells.

Grid area

Basic example

Let's create a website layout containing a navbar, ads, main, aside, and footer using the grid system.

Website layout

Create a parent element that will serve as your grid container and all of its children will automatically become grid items.

<main>
    <div class="navbar">
        Navbar
    </div>

    <div class="ads">
        Ads
    </div>

    <div class="main_content">
        Main
    </div>

    <div class="aside">
        Aside
    </div>

    <div class="footer">Footer</div>
</main>

Set the container's display property to grid.

/* Grid CONTAINER */
main {
    display: grid;
}

/* Grid ITEMS */
.navbar {}
.ads {}
.main_content {}
.aside  {}
.footer {}

You can see a proper visualization of your layout inside of the Firefox browser.z

CSS Grid example

Simply imagine a grid layout as an Excel spreadsheet, where every grid item has its own cell and is placed by cell's location.

Each individual cell contains an element label which should appear there. Here, we are defining the structure of our website by using cell labels representing each grid area.

"Navbar Navbar Navbar" <-- Navbar for the top of our website

"Ads Main Aside"       <-- Ads for the left, main for middle, aside for the right

"Footer Footer Footer" <-- Footer for the bottom

We can use the code above as the value of our grid template. Grid property grid-template-areas establishes the cells in the grid and assigns them labels. Additionally, using grid-area we are "connecting" to the grid cells represented by their labels. We are referring to the template area of our grid by passing the cell names to grid-area of each child.

/* Grid CONTAINER */
main {
    display: grid;
    grid-template-areas:
        "Navbar  Navbar  Navbar"
        "Ads     Main    Aside"
        "Footer  Footer  Footer";
}

/* Grid ITEMS */
.navbar       { grid-area: Navbar }
.ads          { grid-area: Ads }
.main_content { grid-area: Main }
.aside        { grid-area: Aside }
.footer       { grid-area: Footer }

End result:

Visualization:

Conclusion

In this topic, we've covered the basics of CSS Grid and the most important terms We've also sharpened our knowledge with a simple example. We've learned about grid lines that represent the lines separating the grid into rows and columns, grid track space between any two parallel grid lines, grid-cell, the smallest space on a grid crossing a row and a column, and grid-area that means several gird cells together.Finally, we've created a basic layout using the CSS grid.