CSS Grid

Introduction

Traditional css layout techniques have limitations in regards to the huge growth in mobile and tablet sized screens. Therefore creating a responsive website layouts with the traditional layout techniques become more complex.

So it was a necessity to find new css layout techniques that will reduce this complexity. One of these techniques is the Grid.

Learning Objectives

• What a grid is
• How to create a grid container
• How to create a fixed track size
• How to create a flexible track size
• The difference between an implicit and explicit grid
• How the fr unit is used
• How to place items into a precise location on the grid
• How Grid handles overlapping content
• What grid lines are and how they are used
• How to position items against the grid line
• What a grid cell is
• What grid areas are and how they are used to layout content
• What gutters (also known as alleys) in the grid are.
• How to nest grids

Overview

Grid layout introduces the two-dimensional grid system. In other words the Grid layout system works with columns and rows as opposed to the one dimensional alternatives which let us work with either the columns or the rows.

This is really important because with this layout system we can build more complex layouts in a simple and clean way. To be more specific, we don’t have to include everything in the html markup as we would do with other tools like Bootstrap for example.

Now let’s see some practical tips to help us use Grid in our layouts.

Grid Tips

1. Draw your grid first on paper.

   • It really helps you have a visual representation of what you are trying to achieve.

2. Be cautious when using fractions.

   • Grid offers a powerful feature to set widths as fractions of the available space. However, if you mix fractions and non-flexible spacing, such as pixels, fractions are calculated based on the space remaining after the fixed width elements are accounted for. This can mean the grid doesn’t end up looking how you pictured it.

3. Be cautious with whitespace.

   • If your layout includes any rows or columns with no elements, you need to account for this whitespace too. Be sure to account for empty contents as much as elements.

4. Understand how explicit and implicit grids are formed.

   • Understanding how Grid forms these will really help you set up your grid properly and avoid unexpected results.

5. Start with a simple grid.

   • Setup a simple grid and make small adjustments. If you create a grid with an even number of columns and rows it will limit the flexibility of the grid but while learning will help avoid any confusion.

Unfortunately there is one limitation to the current grid specification. This limitation is that subgrids are not yet widely available. According to the CSS specification, subgrid is defined as a nested grid that follows the same grid as the parent. Currently only Firefox supports these, and there is no current schedule for when other browsers will implement subgrids.

Having said that all major browsers support Grid and that means that you can use it right away to start creating awesome layouts. You can find out if your browser version supports it here.

Quickstart

• Get your hands dirty with this quick 7 minutes introduction to CSS Grid:

After you’ve watched the video, download the initial code and try each CSS property shown in the video, play around with the values and pay close attention to how it transforms the layout.

Make sure you read about what each CSS property does and how it is supposed to be used:

• grid-column
• grid-gap
• grid-template-columns
• align-items (Applies for both Flexbox and Grid)
• grid-templates-areas
• grid-column

Study

• Complete CSS Grid Garden. An awesome resource for learning the basics of css grid through 28 levels.

• Check out the videos at Grid by Example. They are nice and short and cover all the major areas of CSS Grid.

• Wes Bos has a CSS Grid course which goes really in depth on the subject.

• Watch the following guest lecture by Tim Coomar on CSS Grid:

Duration: 110 minutes

• Watch the following video and make sure to code along. The video is about 15 minutes long, but it will take you about 30 to 45 minutes to finish it by coding along. The calendar code includes some JavaScript also.

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

• The MDN Grid pages are a great place to review CSS Grid and make sure you are comfortable with the main areas of the specification.

• This Rachel Andrew YouTube Video is a great video on using Grid over other options.