CSS Grid

Jump into the powerful CSS3 property CSS Grid

This guide was inspired by a talk by Morten Rand-Hendriksen.After watching that I was convinced that I wanted to play with this CSS property, real quick. A lot of the concepts covered in this site originates from the talk, but the finer details come from a guide by CSS-Tricks, and another from Mozilla.

Introduction

What is a CSS Grid?

CSS Grid is designed to help you create organized CSS layouts using a grid system. It's similar to using except it is two-dimensional.

Mozilla Developer Network defines it as:

The grid CSS property is a shorthand property that sets all of the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), and the gutter properties (grid-column-gap and grid-row-gap) in a single declaration.

Why would you use this?

Well, almost everything you know about styling a webpage is a hack. Using tables, floats, and a variety of other tricks to layout a page were just hacks to make some things work.

All you need is a container or a wrapper around your content. Then you just style it with: For example: Pretty simple, right?

Grid Features

What is a CSS Grid?

CSS Grid

display: grid;

is designed to help you create organized CSS layouts using a grid system. It's similar to using

display: flexbox;

except it is two-dimensional.

Why would you use this?

Well, almost everything you know about styling a webpage is a hack. Using tables, floats, and a variety of other tricks to layout a page were just hacks to make some things work.

All you need is a container or a wrapper around your content.

Then you just style it with:

 display: grid

For example:

                    
                        .container {
                            display: grid;
                        }

Pretty simple, right?

Key Terms

Some Words You Should Get Familiar With

Before diving into the code there are some terms and concepts you should know. Here are some terms, you may already familiar with, but not in this context. At this point I am just going to copy paste the information in the Mozilla article. That I way I could have some content on this page.