CSS Grid: grid-row/column-start/end VS grid-area + grid-template-area

Question

I have been reading through the CSS Grid tutorial at CSS Tricks, but one basic aspect confused me a bit.

There seems to be two ways of deciding how many cells a grid item spans:

1. grid-template-area using names given to grid items with the grid-area property
2. Using grid-column-start/end and grid-row-start/end

Looking at my test code below, it seems the sizes of the grid items are decided in the following order (where values to the left overwrites values to the right):

grid-row/column-start/end > grid-template-area > Size of items themselves

Question

1. Is my above order generally correct?
2. Is there a preferred way (1 or 2 above), of specifying the size of the grid items (i.e. how many cells they span)?

Code

.container {
  display: grid;
  border: 1px solid green;
  grid-template-columns: 120px 120px 120px;
  grid-template-rows: 120px 120px 120px;
  grid-template-areas: "item-1 item-1 item-2" "item-3 item-4 item-4" "item-5 item-6 .";
}

.item-1 {
  border: 1px solid blue !important;
  grid-area: item-1;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 1;
}

.item-2 {
  grid-area: item-2;
}

.item-3 {
  grid-area: item-3;
}

.item-4 {
  grid-area: item-4;
}

.item-5 {
  grid-area: item-5;
}

.item-6 {
  grid-area: item-6;
}

.box {
  border: 1px solid red;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

<div class="container">
  <div class="item-1 box">Box1</div>
  <div class="item-2 box">Box2</div>
  <div class="item-3 box">Box3</div>
  <div class="item-4 box">Box4</div>
  <div class="item-5 box">Box5</div>
  <div class="item-6 box">Box6</div>
</div>

Answer 1

With the grid-template-areas property you are limited to rectangular grid areas.

With the grid-column-* and grid-row-* properties you have more flexibility.

• grid-template-areas with ASCII art is not working
• Grid areas not laying out properly in CSS Grid

---

With grid-template-areas you can create grid areas only within the explicit grid.

With grid-column-* and grid-row-* you can go outside the explicit grid, creating grid areas in the implicit grid.

• Changing grid template columns breaks layout

Answer 2

There seems to be two ways of deciding how many cells a grid item spans:

To be more precise there are 3 ways to place items. From the specification:

The contents of the grid container are organized into individual grid items (analogous to flex items), which are then assigned to predefined areas in the grid. They can be explicitly placed using coordinates through the grid-placement properties or implicitly placed into empty areas using auto-placement. §8 Placing Grid Items

So either you consider area, coordinate or you leave the job to the browser for the auto placement. Basically you can use only one way.

Note that grid-area is the shorthand property for the explicit placement which can also be replace by grid-row-start; grid-column-star; grid-row-end; grid-column-end;

Here is a simple example to illustrate:

.grid {
  display:inline-grid;
  grid-template-areas:
    "a b"
    "c d";
  grid-gap:20px;
  border:1px solid;
}
span {
  width:50px;
  height:50px;
  background:red;
}
.one > span {
  grid-area:a;
  grid-row-start:1;
  grid-row-end:3;
  grid-column-start:1;
  grid-column-end:3;
}
.two > span {
  grid-row-start:1;
  grid-row-end:3;
  grid-column-start:1;
  grid-column-end:3;
  grid-area:a;
}

<div class="grid one">
  <span></span>
</div>

<div class="grid two">
  <span></span>
</div>

You can clearly see that we have a different result because of the order. This is logical since we are overriding properties. There isn't any order but only one configuration will be considered for your item.

You can inspect the second element and you will have the computed value like this:

You will not find a property called grid-area like you won't find a property called background, margin, border etc because all will get replaced by the longhand notation.

---

Considering the size, you should make the difference between the size of the tracks and the size of the items. In the previous example we didn't define any explicit size so the item width/height will also define the size of the track.

You can explicitely set the track sizes using different properties like grid-template-columns grid-template-rows and you will notice that grid item size will not always follow the size of the tracks and we may have overflow:

.grid {
  display:inline-grid;
  grid-template-columns:150px 150px;
  grid-template-areas:
    "a b"
    "c d";
  grid-gap:20px;
  border:1px solid;
}
span {
  width:50px;
  height:50px;
  background:red;
  grid-area:a;
}
.one > span {
  width:400px;
}
.two > span {
  width:100%;
}

.three > span {
  width:200%;
}

<div class="grid one">
  <span></span>
</div>

<div class="grid two">
  <span></span>
</div>

<div class="grid three">
  <span></span>
</div>

We have defined the track size to be 150px and if the item with is bigger we simply have an overflow. You will also notice how percetange will behave since the track will be the containing block of the grid item and not the grid container.

Using dev tools you can clearly see the tracks:

If for example you consider 1fr unit or auto then the width of the element will be used to define the sizes:

.grid {
  display:inline-grid;
  grid-template-columns:1fr 150px;
  grid-template-areas:
    "a b"
    "c d";
  grid-gap:20px;
  border:1px solid;
}
span {
  width:50px;
  height:50px;
  background:red;
  grid-area:a;
}
.one > span {
  width:400px;
}

<div class="grid one">
  <span></span>
</div>

So we can identify 4 cases ¹:

1. item size not defined and track size not defined: The content of each item will be used to define the item and the track size.
2. item size not defined and track size defined: The item will be stretched to fill the track size (we may have overflow depending on the content of the item).
3. item size defined and track size defined: There is no size relation between both, we simply place the item inside the track. We can either have overflow or empty space inside the track.
4. item size defined and track size not defined: The item size will dictate the track size. Depending on the cases, it will not define it but it will be considered in the caclulation. (ex here: https://stackoverflow.com/a/54639430/8620333)

^{1: this is very simplifed to make think more clear. The sizing algorithm is more complex.}