CSS Grid Basics

CSS has come a long way. I remember in 2013, I was on a project developing a products listing page for an electronic components e-commerce site. The page had tooltips, multiple tabs, dropdown for distributors, and pricing data all on one page. The UX was especially important as the primary users of this e-commerce site were people who were familiar with purchasing electronic components for industries such as Oil & Gas, Data Centers, Medical & Healthcare, and much more. Grids weren’t adopted widely then and we also had to support IE all the way down to IE6. So floats, inline-block, and negative margins/paddings it was!

Then came Flexbox which was intended for laying out elements in a single dimension - a column or row. But what about two dimensional layouts? For that we now have Grid.

As of now, Grid is adopted by most major browsers without vendor prefixes. Without further ado, let’s dive into the basics.

Grid Terminology

Here’s some terminology to get started.

Grid Container - The outer element whose display is set to display: grid

Grid Item - The direct child elements of the Grid Container

Grid Line - the lines of the grid including the outer borders

Grid Cell - a single “unit” of the grid. It’s the space between two adjacent row and two adjacent column grid lines

Grid Track - a single row or column of grid cells or the space between two adjacent grid lines

Grid Area - space surrounded by four grid lines

We’ll define a container element as the grid with display: grid and set the sizes of the columns and rows with grid-template-columns and grid-template-rows.

   

See the Pen CSS Grids: "fr" example by Johnny Chen (@mcjcc) on CodePen.

   

In this example, row grid tracks are 1fr tall and the column grid tracks are 1fr wide. Also, if your columns are all the same width and all your rows are the same height, there is a shorthand way to set the grid-template-columns/rows using the repeat keyword. The repeat keyword is a useful little function that allows you to write grid rules in a more compact form.

The fr unit of measurement or the fraction unit. If you’ve never seen this before, fr “represents a fraction of the leftover space in the grid container.” https://www.w3.org/TR/css3-grid-layout/#fr-unit.

The browser automatically adjusts the sizes of the grid elements to fit the grid container. Let’s see what happens when we use a length value such as percentage.

   

See the Pen CSS Grids: percentage example by Johnny Chen (@mcjcc) on CodePen.

   

Using a length type unit doesn’t automatically adjust to the width of the container and causes the grid items to overflow. What we are telling the browser to do is set each grid item to 33% of the width and height AND have a 10px gap.

Grid can also be used to create a layout that may not traditionally be seen as a grid. In this example below, the “Holy Grail” layout is implemented with Grid.

   

See the Pen CSS Grid - Holy Grail by Johnny Chen (@mcjcc) on CodePen.

   

The Holy Grail layout with the gridlines displayed.

Grid have become my favorite way of creating layouts. The fr unit is a useful way to automatically size the grid items to the container. There is plenty of utility with Grid and this post just scratches the surface and is meant to give you an introduction. To learn more about what else you can do, check out one of my favorite resources for web docs: MDN

 

Did you like this article? Check out these too.

 

Found this useful? Have a suggestion? Get in touch at blog@hocnest.com.