Understand CSS grid layout: grid areas

Understanding CSS Grid: Grid Template Areas, by Rachel Andrew

This article is the third in a series that covers grid layout from novice to expert.

Part 1: Create a grid container
Part 2: Grid lines
Part 3: Grid areas

We have learned how to locate grid items using line numbers and named grid lines. There is another way to position grid projects, which are natural descriptions of the layout — grid-template-Areas attributes. This article shows you how to use the Grid-template-Areas attribute and how it works.

use`grid-template-areas`Describes the layout

The grid-template-Areas attribute accepts values made up of one or more strings. Each string (enclosed in quotes) represents a row in the grid. It can be used on a grid where grid-template-columns (grid-template-rows) is set.

The grid in the following example is described by four regions, each occupying two rows and two columns. Grid regions are scoped by repeating a region name in multiple cells.

grid-template-areas: "one one two two"
                     "one one two two"
                     "three three four four"
                     "three three four four";
Copy the code

Use the grid-area attribute on a grid project to give it an area name that indicates that the area is occupied by the project. Suppose that there is a.test project that wants to occupy the area called one. It can be specified as follows:

.test {
  grid-area: one;
}
Copy the code

Here is a complete example:

<div class="grid">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-areas:
    "one one two two"
    "one one two two"
    "three three four four"
    "three three four four";
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 100px);
}
  
.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.four {
  grid-area: four;
}
</style>
Copy the code

Effect (Demo) :

If you use the Firefox Grid Inspector to look at the distribution of area names and line numbers, you can see that each item occupies two rows and two columns and is located in the Grid.

use`grid-template-areas`The rules of

Using the grid-template-Areas attribute has some qualifying rules that make the layout invalid if you break them. The first rule is that you must describe the grid completely, that is, consider every cell in the grid.

If a cell needs to be left blank, one or more points must be inserted (such as. Or… Etc.) placeholder. Note that there is no space between dots when multiple dots are used.

So, it can also be defined like this:

grid-template-areas: "one one two two"
                     "one one two two"
                     ". . four four"
                     "three three four four";
Copy the code

Effect (Demo) :

A region name cannot be used on two regions that are not contiguous. For example, the following way of defining three is invalid:

grid-template-areas:"one one three three""one one two two""three three four four""three three four four";
Copy the code

Also, you cannot create a non-rectangular region. For example, the definition of an “L” or “T” shaped region is invalid.

grid-template-areas:"one one two two""one one one one""three three four four""three three four four";
Copy the code

Formatted string

I like to define grid-template-areas attributes the way above — each string corresponds to a row in the grid, which seems intuitive.

Sometimes I choose to use multiple dots to specify empty cells in order to achieve alignment between columns.

grid-template-areas:"one   one   two  two""one   one   two  two""... .four four""three three four four";
Copy the code

Of course, it also works if strings are arranged on a single line:

grid-template-areas:"one one two two""one one two two""three three four four""three three four four";
Copy the code

`grid-template-areas` 和 `grid-area`

The reason for keeping each named area rectangular is that each area is required to be implemented in a gridline-based manner — and an area defined using four gridlines must be a rectangle, not a non-rectangle.

I’ll start with an example of using grid lines to locate projects:

<div class="grid">
  <div class="item">Item</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: repeat(5, 50px);
}
.item {
  grid-column: 2 / 4;
  grid-row: 1 / 4;
}
</style>
Copy the code

Effect (Demo) :

That is, an item’s position in the grid can be determined by specifying the following four attributes:

grid-row-start
grid-column-start
grid-row-end
grid-column-end

The grid-area property supports the syntax for specifying project locations in this order:

grid-area: grid-row-start grid-column-start grid-row-end grid-column-end
Copy the code

Therefore, the following is written:

.grid {
  grid-template-areas: "one   one   two  two"
                       "one   one   two  two"
                       "three three four four";
                       "three three four four";
}

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.four {
  grid-area: four;
}
Copy the code

Can be rewritten as:

.one {
  grid-area: 1 / 1 / 3 / 3;
}

.two {
  grid-area: 1 / 3 / 3 / 5;
}

.three {
  grid-area: 3 / 1 / 5 / 3;
}

.four {
  grid-area: 3 / 3 / 5 / 5;
}
Copy the code

What’s interesting about grid-Area is that you can also specify location areas for projects using line numbers and named grid lines.

Using line numbers`grid-area`

Using four line numbers to specify grid-area attributes. But what if it’s not four? For example, if I specify only the first three and not the fourth value, the default value auto is used, which extends one track by default. Therefore, if grid-row-start: 3 is used for a project, the other three values are set to auto — the project occupies one row and one column by default:

.item { grid-area: 3; }
Copy the code

Effect:

Use Indent’s Grid-Area

“Indent” is the name given to a named area in a grid.

Here is an example of using named gridlines to specify grid-area properties.

.grid {
  display: grid;
  grid-template-columns:
      [one-start three-start] 1fr 1fr
      [one-end three-end two-start four-start] 1fr 1fr [two-end four-end];
  grid-template-rows:
    [one-start two-start] 100px 100px
    [one-end two-end three-start four-start] 100px 100px [three-end four-end];;
}

.two {
  grid-area: two-start / two-start / two-end;
}
Copy the code

Notice that I didn’t specify grid-column-end here. In this case, grid-column-end duplicates the value of grid-column-start, whereas grid-column-end is the same as grid-column-start. The grid-column-end value is discarded again, and the result is the same as when the row number was set — the same as when auto was set — to automatically extend a track.

Also, if the value of the third grid-row-end attribute is missing, it copies the value of grid-row-start, which is equivalent to setting auto.

Here is a more comprehensive example, listing all the cases:

<div class="grid">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: 
    [one-start three-start] 1fr 1fr 
    [one-end three-end two-start four-start] 1fr 1fr
    [two-end four-end];
  grid-template-rows: 
    [one-start two-start] 100px 100px
    [one-end two-end three-start four-start] 100px 100px
    [three-end four-end];
}

.one {
  grid-area: one-start / one-start / one-end / one-end;
}

.two {
  grid-area: two-start / two-start / two-end;
}

.three {
  grid-area: three-start / three-start;
}

.four {
  grid-area: four-start;
}
</style>
Copy the code

Effect (Demo) :

This also explains why grid-area can work with just one ident value.

Another thing you need to know is that when you create named areas using the Grid-template-Areas attribute, the edge grid lines of each area can be referenced by the area name. I’ll use the name of a zone called One as an example.

So the way I’m going to write it,

.one {
  grid-area: one;
}
Copy the code

Equivalent to this (the other three values copy the first value) :

.one {
  grid-row-start: one;
  grid-row-end: one;
  grid-column-start: one;
  grid-row-end: one;
}
Copy the code

If it is -start, one is resolved to the start line of the row and column in the region. If it is the -end attribute, then one is resolved to the end line of the row and column in the region. Of course, this is only true if grid-area is specified with a named region value.

In the use of`grid-template-areas`Layering items in the layout

When using grid-template-areas to define areas, each cell can have only one name. Of course, after the main layout is complete, you can still use line numbers to superimpose new items onto the layout.

In the following example, outside of the theme layout, I overlay an item in the layout based on grid lines:

<div class="grid"> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> <div class="four">4</div> <div class="five">5</div> </div> <style> .grid { display: grid; grid-template-areas: "one one two two" "one one two two" "three three four four" "three three four four"; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 100px); } .one { grid-area: one; } .two { grid-area: two; } .three { grid-area: three; } .four { grid-area: four; Five {grid-row: 2/4; five {grid-row: 2/4; grid-column: 2 / 4; } </style>Copy the code

Effect (Demo) :

You can also use named gridlines to specify which rows and columns your project occupies. Even better, when you define grid areas using grid-template-areas, you actually also generate a name prefixed with the region name for the four grid lines around the region. The grid lines at the beginning edge of the region are named xx-start. The name of the gridline that terminates the edge is xx-end.

For example, to name a region one, its starting edge is named one-start and its ending edge is named one-end.

You can use these implicitly generated named grid lines to locate items in a grid. This can be useful in scenarios where the grid layout needs to be redefined at different breakpoints, and you want a location item to always come after a row name.

<div class="grid">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-areas:
    "one one two two"
    "one one two two"
    "three three four four"
    "three three four four";
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 100px);
}
  
.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.four {
  grid-area: four;
}

.five {
  grid-row: one-start / three-end;
  grid-column: three-start / four-start;
}
</style>
Copy the code

Effect (Demo) :

Used in responsive design`grid-template-areas`

When I was building a component library, I used the Grid-template-Areas attribute to see exactly how components are composed in the CSS. Especially when redefining the grid layout at different breakpoints, I can change the number of tracks and the distribution of regions in the current grid by simply reassigning the grid-template-Areas attribute.

In the CSS below, the default component layout is single column, and when the viewport width is above 600px, I reassign the grid-template-area property to a two-column layout. The advantage of this approach (which I mentioned earlier) is that anyone who looks at the CSS can clearly see how it is laid out.

.wrapper {
  background-color: #fff;
  padding: 1em;
  display: grid;
  gap: 20px;
  grid-template-areas:
    "hd"
    "bd"
    "sd"
    "ft";

}

@media (min-width: 600px) {
  .wrapper {
    grid-template-columns: 3fr 1fr;
    grid-template-areas:
      "hd hd"
      "bd sd"
      "ft ft"; }}header { grid-area: hd; }
article {grid-area: bd; }
aside { grid-area: sd; }
footer { grid-area: ft; }
Copy the code

accessibility

One problem with using grid-template-areas and grid-Area attributes to define layouts is that the visual representation of elements may not be in the same order as in the source code. If the page is accessed using the Tab button or the language assistant, the content is seen or heard in the source order, and if elements in the layout are moved for poetic purposes, the visual rendering will be confusing. Therefore, when moving a project, it is important to pay attention to the correlation between visual presentation and source code so as not to get an inconsistent experience when accessing an assistive device.

conclusion

That’s all there is to creating a layout with grid-template-area and grid-area attributes. Give this layout a try if you haven’t already. I found it very convenient to use this layout to design prototype pages.

(End of text)

Advertising time (long term)

I have a good friend who owns a cattery, and I’m here to promote it for her. Now the cattery is full of Muppets. If you are also a cat lover and have the need, scan her FREE fish QR code. It doesn’t matter if you don’t buy it. You can just look at it.

(after)

Understand CSS grid layout: grid areas

usegrid-template-areasDescribes the layout

usegrid-template-areasThe rules of

Formatted string

grid-template-areas 和 grid-area

Using line numbersgrid-area

Use Indent’s Grid-Area

In the use ofgrid-template-areasLayering items in the layout

Used in responsive designgrid-template-areas

accessibility

conclusion

Related Posts

Register global components in the Vue project

52 common regular expressions

Webpack Code Splitting

use`grid-template-areas`Describes the layout

use`grid-template-areas`The rules of

`grid-template-areas` 和 `grid-area`

Using line numbers`grid-area`

In the use of`grid-template-areas`Layering items in the layout

Used in responsive design`grid-template-areas`