CSS Grid Layout, simply known as Grid, is a layout scheme that is the newest and the most powerful in CSS. It is supported by all major browsers and provides a way to position items on the page and move them around.

It can automatically assign items to areas, size and resize them, take care of creating columns and rows based on a pattern you define, and doing all the calculations using the newly introduced fr unit.

Why Grid?

• You can easily have a 12-column grid with one line of CSS. grid-template-columns: repeat(12, 1fr)
• Grid lets you move things in any direction. Unlike Flex, where you can move items either horizontally (flex-direction: row) or vertically (flex-direction: column) - not both at the same time, Grid lets you move any grid item to any predefined grid area on the page. The items you move do not have to be adjacent.
• With CSS Grid, you can change the order of HTML elements using only CSS. Move something from top to the right, move elements that were in footer to the sidebar etc. Instead of moving the <div> from <footer> to <aside> in the HTML, you can just change it’s placement with grid-area in the CSS stylesheet.

Grid vs. Flex

• Flex is one-dimensional - either horizontal or vertical, while Grid is two-dimensional, meaning you can move elements in both horizontal and vertical planes
• In Grid, we apply layout styles to the parent container and not the items. Flex on the other hand targets the flex item to set properties like flex-basis, flex-grow, and flex-shrink
• Grid and Flex are not mutually exclusive. You can use both on the same project.

Checking browser compatibility with @supports

Ideally, when you build a site, you’d design it with Grid and use Flex as a fallback. You can find out if your browser supports grid with the @support CSS rule (aka feature query). Here’s an example:

.container {
  display: grid; /* display grid by default */
}

@supports not (display: grid) { /* if grid is not supported by the browser */
  .container {
    display: flex; /* display flex instead of grid */
  }
}

Getting Started

To make any element a grid, you need to assign its display property to grid, like so:

.conatiner {
  display: grid;
}

And that’s it. You just made your .container a grid. Every element inside the .container automatically becomes a grid item.

Defining templates

Rows and columns

grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto 300px;

Areas

grid-template-areas: 
  "a a a a"
  "b c d e"
  "b c d e"
  "f f f f";

or

grid-template-areas:
  "header header header header"
  "nav main main sidebar";

Grid Areas

Here’s some sample code on how to define and assign grid areas

.site {
  display: grid;
  grid-template-areas: /* applied to grid container */
    "head head" /* you're assigning cells to areas by giving the cells an area name */
    "nav  main" /* how many values kind of depends on how many cells you have in the grid */
    "nav  foot";
}

.site > header {
  grid-area: head;
}

.site > nav {
  grid-area: nav;
}

.site > main {
    grid-area: main;
}

.site > footer {
    grid-area: foot;
}

The fr unit

Grid introduces a new fr unit, which stands for fraction. The good thing about using the fr unit is that it takes care of calculations for you. Using fr avoids margin and padding issues. With % and em etc. it becomes a math equation when calculating grid-gap. If you used fr unit, it’ll automatically calculate both column and gutter sizes and adjust the size of the columns accordingly, plus there will be no bleeding gaps at the end either.

Examples

Changing the order of elements based on screen size

Let’s say you want to move the footer to the bottom on small screens and to the right on bigger screens, and there’s a bunch of other HTML elements in between the two.

The simple solution is to change the grid-template-areas based on the screen size. You can also change the number of columns and rows based on the screen size, too. This is a much cleaner and simpler alternative to Bootstrap’s Grid system (col-xs-8 col-sm-6 col-md-4 col-lg-3).

.site {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title title"
    "main header"
    "main sidebar"
}

@media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */
  .site {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas:
      "title title title"
      "main header header"
      "main sidebar footer"
  }
}

See the Pen CSS Grid by example - 2 (grid areas + grid gap) by Aamnah Akram (@aamnah) on CodePen.

CSS Grid changes how we can think about document structures

Anyone who has even dabbled a little in creating websites knows that <div>s are an essential building block for controlling our layouts.

HTML5 introduced new semantic elements to help, and while they are a fantastic addition to the language, they’re a little bit like the garnish on our <div> soup.

With grid, we no longer have to rely on <div>s to create the structure of our page, or even a more complex component. The structure is literally defined by the parent and not how the content is organized within in.

This means we can have nice, simple markup that sticks to the content itself without a reliance on organizing it through the use of <div>s.

Grid might be complicated, but so is flexbox

I’ve heard a lot of people complain that grid is too complicated and that flexbox gets the job done. I’d argue that they are comfortable with flexbox and don’t want to bother learning grid because of that.

At the end of the day, Grid does introduce a boatload of new properties and values, so yes, there is a learning curve. But flexbox is plenty complicated as well.

Can you tell me the benefits of flex-basis over setting a width? Or really, how flexbox calculates the widths of flex items if we haven’t explicitly set them?

For example, if you showed the below example to someone who had never used flexbox, how do you explain the fact that it’s the same markup and the same CSS for both sets of columns? To make it even worse the second column in both has a width: 50%. Clearly that width of 50% isn’t really setting it to 50%.

“Well, it starts off with flex items shrinking if there isn’t enough room, so even though we set the width to 50%, it doesn’t have the space, so it shrinks down to squeeze in because the other div requires more space. The 50% is more of its ideal size than what it will actually be.

“So in the top example, the first div’s content being so long is causing a problem because, as a flex item, by default, it wants to shrink to fit its content. In this case that item has a lot of content so…”

So yes, flexbox is awesome and does a great job at creating layouts, but please don’t tell me that it’s simple. As soon as you get out of perfect examples, it’s often far from intuitive and sometimes it can be downright strange.

Grid is complicated in that there are a lot of new properties and values, but they gives us a lot more control than flexbox does.

In this article I’d like to look at how that extra layer of control helps simplify our markup and let us write less code, and that’s without even learning how to use a bunch of its fancy features.

The limitations of flexbox

Even if we take a simple component and build it with flexbox, because it only acts in 1-dimension at a time (the flex items are either rows or columns, they cannot be both), we’re left with a lot of divs to break things up into rows, which can then be split into columns.

For example, if we’re working on a card that looks like this:

It’s not a complicated layout but we still need to organize our content in a pretty specific way to get it to work.

The yellow and orange boxes there are needed, so that when we place a display: flex; on the .card itself (the red box), it will create two columns. So to structure everything, we get markup that looks something like this:

<div class="card">  
    <div class="profile-sidebar">
        <!-- profile image and social list here --> 
    </div>
    <div class="profile-body">
        <!-- name, position, description here -->
    </div>
</div>

It’s not overly complicated by any means, and once you understand how flexbox works, it relatively straight forward.

When we put a display: flex on the .card, we'll get our two columns, and then we need to go into those and start styling them up.

Here is a working example with all the styling on it:

The thing is, by having to create columns of content, we’re getting a little more complicated in the markup, and we’re also limiting ourselves as we’ve forced different pieces of content to be grouped together.

Simplifying everything with CSS Grid

Because grid is 2-dimensional, meaning that it allows us to create rows and columns at the same time, that means that our grid container (where we declare display: grid) has full control over the layout inside of it.

We used to require

<div class="card"> <img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img">
  <ul class="social-list"> ... </ul>
  <h2 class="profile-name">Ramsey Harper</h2>
  <p class="profile-position">Graphic Designer</p>
  <p class="profile-info">Lorem ipsum ...</p>
</div>

.card {  
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.card {
  ...
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-column-gap: 2em;
  grid-template-areas:
      "image name"
      "image position"
      "social description";
}


.profile-name     { grid-area: name; }
.profile-position { grid-area: position; }
.profile-info     { grid-area: description; }
.profile-img      { grid-area: image; }
.social-list      { grid-area: social; }

.card {
  /* old layout 
  grid-template-areas:
      "image name"
      "image position"
      "social description"; */

  /* updated layout */
  grid-template-areas:
      "image name"
      "image position"
      "image social"
      ". description";
}

.card {
  /* setup for small screens */
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 2em;
  grid-template-areas: 
      "name" 
      "image" 
      "social" 
      "position" 
      "description";
}
.profile-name     {  grid-area: name;}
.profile-position {  grid-area: position; }
.profile-info     {  grid-area: description; }
.profile-img      {  grid-area: image; }
.social-list      {  grid-area: social; } 


/* rearanging the layout for large screens */

@media (min-width: 600px) {
  .card {
    text-align: left;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: 
        "image name" 
        "image position" 
        "social description";
  }
  .profile-name::after {
    margin-left: 0;
  }
}

TL;DR

The most popular way to display a collection of similar data is to use tables, but HTML tables have the drawback of being difficult to make responsive.

In this article, I use CSS Grid Layout Module and CSS Properties (and no Javascript) to layout tables that wrap columns depending on screen width, which further changes to a card based on layout for small screens.

For the impatient, look at the following pen for a prototypical implementation.

A Little History of Responsive HTML Tables

Responsive tables aren’t a new topic, and there are many solutions that have already been proposed. “Responsive Table Data Roundup” first published in 2012 by Chris Coyier, has things summarized very neatly (including a 2018 update).

“Really Responsive Tables using CSS3 Flexbox” by Vasan Subramanian shows an idea of wrapping columns, implemented with Flexbox.

Even though many interesting ideas have been proposed, libraries like bootstrap opt for horizontal scrolling for small screens.

As we now have CSS Grid, I think we could have a better common alternative to horizontal scrolling.

HTML Tables

Starting with the basics, a table in HTML is a layout format for displaying collections of items through a matrix of rows and columns. Items are laid out in rows, with the same data attributes in the same columns, with the rows often sorted with one or more sortable attributes. The format gives you a birds-eye view to quickly grasp and examine large quantities of data.

For example, here’s a hypothetical table of purchase order details, that you may see in a purchasing application.

Table of purchase order details

An item, in this case, is a purchase order detail, that has attributes such as part number, part description, etc.

When using HTML tables, the layout of the data is hardcoded as rows and columns (e.g. <tr> and <td>). This may be sufficient for usage by a screen that fits the whole table width, but in reality, this does not apply for the myriad of devices that exist today. In terms of hacks, you can alter the display property of tables and use any layout you can do with CSS in general, but that doesn’t seem semantically correct.

Tables Redefined (= Collection of Items)

Let’s start by redefining how table data should be expressed in HTML.

As stated earlier, since table data is essentially an ordered collection of items, it seems natural to use ordered lists. Also, since tables are often used to supplement textual descriptions, it seems natural to enclose this in a section, but this would depend on the context of how the table data is being used.

<section>
 <ol>
  <!-- The first list item is the header of the table -->
  <li>
   <div>#</div>
   <!-- Enclose semantically similar attributes as a div hierarchy -->
   <div>
    <div>Part Number</div>
    <div>Part Description</div>
   </div>
   ...
  </li>
  <!-- The rest of the items in the list are the actual data -->
  <li>
   <div>1</div>
   <!-- Group part related information-->
   <div>
    <div>100-10001</div>
    <div>Description of part</div>
   </div>
  ...
  </li>
 ...
 </ol>
</section>

Vanilla <div>'s are used to express item attributes since HTML5 does not define an appropriate tag for this. The key here is to express semantically similar attributes as a hierarchy of <div>'s. This structure will be used when defining how the data should be laid out. I will come back to this in the next section on the topic of styling.

As for the actual data inside the <div> element, the first item in the list is the header, and the rest of the items are the actual data.

Now, it’s time to start talking about styling the items with CSS Grid.

Styling Item Collections

The basic idea here is to display all attributes of the item as a normal table, display width permitting. This layout has the luxury of being able to see as many items (rows) as possible.

Full Table

When the width of the display becomes narrower, some attributes are stacked vertically, in order to save horizontal space. The choice of stacking attributes should be based on:

1. Do the attributes make sense when stacked vertically? and,
2. When stacked vertically, does it save horizontal space?

Wrapping Table 1. Start by wrapping columns that need little width, and give the other columns space

Wrapping Table 2. Wrap “Part Description”, to be able to see the description

Wrapping Table 3. Further wrap “Vendor Name”

Wrapping Table 4. Wrap vendor related information under part related information

Wrapping Table 5. Fully wrapped

When the width further shrinks to the size of a mobile device, each item is displayed as a card. This layout has redundancy because the attribute names are repeatedly displayed on each card, and has the least glanceability, but does not compromise usability (e.g. horizontal scrolling, super small text, etc).

Two Column Card Layout

One Column Card Layout

Now let’s dive into the details.

Styling Step 1: Full Table

Here’s a visual summary of how things will be implemented with CSS Grid.

Grid containers

In order to make columns wrap, multiple grid containers are defined as a hierarchy. The red box is a grid container for each row, and the blue box is a container for each column group that wraps.

Let’ s start by setting the list as a grid container by defining a class called .item-container and applying it to the <li>(the red box).

.item-container {
    display: grid;
    grid-template-columns: 2em 2em 10fr 2fr 2fr 2fr 2fr 5em 5em;
}

The number of explicit columns specified with grid-template-columns is nine, which is the number of top-level <div>'s, directly under <li>.

The column’s width is defined in relative length to make the columns wrap. The actual fraction has to be fine-tuned, based on the content.

The columns that don’t wrap are defined in absolute length to maximize width usage for the wrapping columns. In the purchase order details example, the second column is a two-digit Id, so I set the width to double that size of 2 m’s.

Next, we define another grid container called .attribute-container and apply it on all intermediate <div>’s under the list (the blue box).

.attribute-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
    }

The minimum column width for all grid items under .attribute-container is specified with a CSS variable called --column-width-min(more on this later) using the minmax function, with the maximum set to take the rest of the space (e.g. one fraction). Since grid-template-columns are repeated, available horizontal space will be split into the maximum number of columns that could take at least --column-width-min, and the rest of the columns would go to the next line. The column’s width will be stretched if there is excess horizontal space because the repeat is auto-fited.

Styling Step 2: Wrapping Table

Next, --column-width-min needs to be specified independently for each column in order to wrap. Just to be clear, the variables need to be specified in order for the full table to render properly as well. To do this, a class is set for each .attribute-container, and a different --column-width-min is specified for each class scope.

Let’s take a look at the HTML where .part-id is applied,

<div class="attribute-container part-id">
    <div>Part Number</div>
    <div>Part Description</div>
</div>

and the CSS:

.part-id {
    --column-width-min: 10em;
}

This specific grid container will have two columns, as long as the available width is wider than 10em for each grid item (e.g. the grid container is wider than 20em). Once the grid container’s width becomes narrower than 20em, the second grid item will go to the next row.

When we combine CSS properties like this, we need only one grid container .attribute-container, with the details changing where the class is applied.

We can further nest .attribute-containers, to have multiple levels of wrapping with different widths, as in the following exert.

<div class="attribute-container part-information">
    <div class="attribute-container part-id">
        <div class="attribute" data-name="Part Number">Part Number</div>
        <div class="attribute" data-name="Part Description">Part Description
    </div>
    </div>
    <div class="attribute-container vendor-information">
        <div class="attribute">Vendor Number</div>
        <div class="attribute">Vendor Name</div>
    </div>
</div>
.part-information {
    --column-width-min: 10em;
}
.part-id {
    --column-width-min: 10em;
}
.vendor-information {
    --column-width-min: 8em;
}

All of the above is enclosed in the following media query. The actual breakpoint should be selected based on the width necessary when your table is wrapped to the extreme.

@media screen and (min-width: 737px) {
...
}

Styling Step Three: Card Layout

The card layout will look like a typical form with attribute names in the first column and attribute values in the second column.

To do this, a class called .attribute is defined and applied to all leaf <div> tags under the <li>.

.attribute {
    display: grid;
    grid-template-columns: minmax(9em, 30%) 1fr;
}

The attribute names are taken from a custom attribute of the leaf <div> called data-name, for example <div class=”attribute” data-name="Part Number">, and a pseudo-element is created. The pseudo-element will be subject to the grid container’s layout.

.attribute::before {
    content: attr(data-name);
}

The first item in the list is the header and does not need to be displayed.

/* Don't display the first item, since it is used to display the header for tabular layouts*/
.collection-container>li:first-child {
    display: none;
}

And finally, the cards are laid out in one column for mobile devices, but two for screens with a little bit more width, but not enough for displaying a table.

/* 2 Column Card Layout */
@media screen and (max-width: 736px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }
...
}
/* 1 Column Card Layout */
@media screen and (max-width:580px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr;
    }
}

Finishing Notes

Accessibility is an area that wasn’t considered at all and may have some space for improvement.

If you have any ideas or second thoughts, please feel free to comment!

And of course, thanks for reading.

June 11, 2017, I decided to read the CSS Grid spec.

The Spec was a little bit technical, but it was by far the most enjoyed specification I had ever read. If you’re a more advanced developer, bookmark it for future references.

So, will this be helpful?

I believe the difference between good and great engineers, is that the latter take their time to understand what really goes on under the hood. They learn how things work, instead of learning by “copy and paste.”

So, do you want to be a great developer?

Hell, yeah. Or, you wouldn’t be reading this article.

What you’ll learn

While reading the spec, I learned some very subtle, but profound details.

In this article, I will share them with you.

1. The CSS Grid is declarative

Declarative APIs are so sweet to work with. Think ReactJS?

As websites evolved from simple documents into complex, interactive applications, web layouts became difficult to compose. So difficult, they were my nightmare.

This is exactly the problem CSS Grid has come to solve today.

From the spec.

The CSS Grid takes away the painful process of crafting intelligent layouts and replaces it with a beautiful set of declarative rules that make the process near effortless.

These are good times in the history of CSS.

2. The fractional unit does not always produce equally spaced rows and columns

One of the first things everyone learns and gets to love about the CSS Grid is the fractional unit. Even a duck can get away with it.

The fractional unit takes away the pain of calculating percentages. It is a delight to work with.

Most people teach that the fractional unit (fr) yields equally spaced columns or rows.

For example, a declaration like 1fr 1fr 1fr is expected to give you columns or rows of equal spacing. See the illustration below:

Equally spaced columns created by the fractional unit.

Sadly, this is NOT always true. Poor duck.

The following is from the spec:

The fr unit fills up the available space BUT it is NEVER smaller than the minimum size of the grid container or the content of the row or column.

Essentially, If you have an image, img or any grid item, with a min-width or min-height declaration, you can have unexpected results with the fractional unit.

After quacking around like a wet scared duck, I spent a lot of time experimenting with the fractional unit. I wrote an article on my findings.

3. You don’t really know how Grids are sized. Or, do you?

A CSS grid definition always begins in the lines of this:

display: grid

Often times, it is followed by the row and column definitions. Something like this:

grid-template-rows: 10px 1fr 3fr
grid-template-columns: 1fr

And finally, you are likely to place the grid items with whatever technique suits you.

Since there are lots of ways to place grid items, I’ll skip the required code for brevity.

So, here’s the problem.

Under the hood, you must assume that the size of the grid rows and columns are first computed before the items are placed. Right?

Well, it appears that the truth is the complete opposite.

How weird.

The following is from the spec:

2.3. Sizing the Grid

Once the grid items have been placed, the sizes of the grid tracks (rows and columns) are calculated, accounting for the sizes of their contents and/or available space as specified in the grid definition.

Note the progression.

1. The grid items are placed.
2. The sizes of the grid tracks are calculated

You’re likely to have questions around this. So, I’ll try to resolve those concerns of yours.

Firstly, note that every grid item is assigned a grid-area . The grid items are then sized within this area. So, how exactly are the grid items placed without already calculating the size of the tracks?

If you take a look at the Placing Grid items section of the spec, you’ll find a clue.

A lot is taken into consideration when sizing grids, and that largely includes the size of the grid items.

Sizing grids may be based on the following:

• A fixed sizing function ([length](https://www.w3.org/TR/css3-values/#length-value) or resolveable [percentage](https://www.w3.org/TR/css3-values/#percentage-value)).
• An intrinsic sizing function ([min-content](https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-min-content), [max-content](https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-max-content), [auto](https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-auto), [fit-content()](https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-fit-content)), or
• A flexible sizing function ([flex](https://www.w3.org/TR/css-grid-1/#typedef-flex)).

What I believe happens under the hood is, the grid items are placed.

That is, the containing block for the item is determined, the sizing function for the item is then determined. This in turn influences the size of the grid tracks.

You see?

Not what you initially thought.

4. By default, grid items are stretched to fit their grid area — except in certain cases

Without your intervention, grid items will always stretch to fit their grid area.

So, if you had a declaration like so:

grid-template-areas: 'header header header'
                     'sidebar main  main'
                     'sidebar footer footer'

And you had divs assigned to the specific grid areas, like so:

.div1 {
   grid-area: header
}
.div2 {
   grid-area: sidebar
}
.div3 {
   grid-area: main
}
.div4 {
   grid-area: footer
}

You don’t need to declare the width and height of the divs above to 100%

They will automatically stretch to fill their respective areas.

Now, here’s the catch.

This behavior is inconsistent with Images.

As pointed out by Rachel Andrew, the spec goes on to say this behavior is different for grid items with an intrinsic aspect ratio.

Don’t let the big words scare you. It ain’t no demogorgon.

An image is by default an inline-block element, but they also have specific dimensions. They have dimensions naturally associated with them. An image could be 400px by 600px wide, or any given dimensions at all.

But, regular block elements such as divs , have no intrinsic dimensions. That is, they do not have dimensions that naturally belong to them.

So, while grid items with NO intrinsic dimensions will stretch to fit their grid area, this is not true for grid items having an intrinsic dimension e.g images.

5. Do you really know what a Grid Item is?

Consider the code block below:

<div style="display: grid">
    <div>block</div>

    <div>float</div>

    I am a random Text 

    <span>
        item 4
    </span>
</div>

In the code block above, can you spot the grid items?

How many grid items are in the code block, 3 or 4?

I failed this question blatantly.

Note that the text I am a random text isn’t wrapped by any html tags.

which is it?

So, what’s your answer?

Well, if you answered 3, you’re wrong. Haha, got ya!

According to the spec, an anonymous grid item is wrapped around each run of text within a grid.

Yes, that means I am a random text is also a grid item.

<div style="display: grid">

<div>block</div>

    <div>float</div>
    <!-- the text below is a grid item -->
    I am a random Text 

    <span>
        item 4
    </span>
</div>

Yeah, the answer is 4. We’ve got 3 explicit grid items and 1 anonymous grid item!

Got that?

6. The margins of adjacent grid items do not collapse.

There are big differences between block elements and grid containers.

What I mean is, an element with display: block and another with display: grid have a lot of fundamental differences.

The difference I am choosing to discuss here is got to do with collapsible margins.

One of first things you learn with CSS is the concept of collapsible margins. I don’t want to spend a lot of time explaining what collapsible margins mean. If you bring it up in the comments, I will.

So, back to grids.

With every grid item, the margins are never collapsed.

Well, this is understandable. Let me show you why.

Adjacent grid items are independently contained within the containing block formed by their grid areas.

What that complex paragraph above means is this. Each grid item lives and breathes within a grid-area

Grid items are placed within their respective grid areas. They stay in their own undisturbed territories. They are unaffected by collapsible margins. How cool.

So, technically, you may say the grid item isn’t an immediate neighbor of the other grid items. But is contained within an uninterrupted closed territory — the grid area.

If you’re curious what other differences exist between block elements and grid elements, I wrote an interesting article on the subject.

7. auto-fill and auto-fit. What's the difference?

While auto-fill and auto-fit look like the same functions they are different in a way.

They are similar in the sense that they allow for automatically creating grid tracks that fill up the grid container in some way.

For example, the following code will create as many 200px columns as will fit into the window width. If there is any remaining space, it will be distributed among the 200px columns.

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

What’s the difference?

auto-fill will create tracks even if there's no grid item to fill it up. auto-fit will not do this. It will deflate empty tracks to zero.

That's all.

8. In the grid-template-areas definition, the number of words in a string MUST be equal.

You remember the weird looking grid-template-areas values that look like a map?

Well, it appears it can mess things up real quick.

In a grid-template-areas declaration, all strings must have the same number of columns, or else the declaration is invalid.

For example:

/* this is valid */

grid-template-areas: "header header header sidebar"
                     "main   main   main   sidebar"
                     "main   main   main   sidebar"

/* this is WRONG */

grid-template-areas: "header header header sidebar"
                     "main   main   main   sidebar"
                     "main   main     sidebar"

The number of word in the strings, must be equal.

9. Avoid using percentages in paddings or margins on grid items entirely

_[From the CSS Grid Spec](https://www.w3.org/TR/css-grid-1/#item-margins" rel="noopener" target="blank" title=")

The reason behind this is simple. At the time of this writing, you will get different behavior in different browsers.

According to the spec, the percentage may be resolved either against the width of the element alone, or left/right margins against the width while top/bottom are resolved against the height

In order to have a consistent rendering across most browsers, avoid using percentages in paddings or margins of grid items.

More importantly, there are already a few confusing bits with the CSS Grid. Don’t shoot yourself in the foot with percentages paddings or margins in grid items.

10. How’s the size of the explicit grid resolved when there’s a conflict?

Assume that you have a grid declaration like so:

grid-template-areas: "header header header sidebar"
                     "main   main   main   sidebar"
                     "main   main   main   sidebar"

In the code block above, you have 4 columns and 3 rows.

What if you also did this:

grid-template-columns: repeat(5, 1fr) 
grid-template-rows: repeat(4, 1fr)

Now you have more columns and rows. 5 columns, and 4 rows.

You got that?

There’s now a conflict in the declarations. So, how is this resolved?

According to the spec, the size of the explicit grid is determined by the larger of the number of rows/columns defined by grid-template-areas and the number of rows/columns sized by grid-template-rows/grid-template-columns.

The spec may seem like it complicated a simple thing. In plain language, what that means is, the declaration with the larger number of rows or columns wins.

In the example above, the grid will take up 5 columns, and 4 rows NOT 4 columns and 3 rows.

*EDIT: The grid-template-areas property is used to place grid items on a grid. So, why should we have a conflict in grid definition? Aren’t grids supposed to be defined with just the grid-template-columns and grid-template-rows properties? I answer this in the comment section. Check it out.

11. The size of the grid is not purely the sum of the track sizes

Grid tracks refer to the distance between grid lines.

While this is simple, it is worth mentioning incase you have a fixed width grid set up.

The size of the grid may be influenced by the grid-row-gap, grid-column-gap and justify-content, align-content . Which sadly, can add additional space between tracks too.

So, be careful while computing fixed widths within the grid.

BONUS: We can all contribute to making the DOCS better

Because I’m a kind soul, I’ve added one more tip here ?

The Spec was written by humans. And it so happens that humans can make mistakes.

While reading the spec, I spotted a tiny typo.

At the time, I wasn’t particularly sure what to do. So, I asked around on Twitter.

The kind Jen Simmons helped file an issue on github, and it got fixed.

So, what’s the moral?

You can help make the docs better by contributing in whatever way possible.

Yes, you!

Let’s make the web better, together.

Want to become Pro?

Download my free CSS Grid guide, and also get two quality interactive Flexbox courses for free!

How to Master the CSS Grid, and what to build along the way (Free PDF Guide)

Get them now ?