Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use grid-template-areas attributes in CSS". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use grid-template-areas attributes in CSS".

Use grid-template-areas to describe the layout

The grid-template-areas property receives a value consisting of one or more strings. Each string (enclosed in quotation marks) represents a line in the grid. It can be used on grids where the grid-template-columns property has been set (grid-template-rows can be set or not).

The grid in the following example is described with four regions, each occupying two rows and two columns. A grid region is delimited 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"

Using the grid-area attribute on a grid project and assigning it a region name means that the area is occupied by the project. Suppose there is a .test project that wants to occupy this area called one, which can be specified as follows:

.test {

Grid-area: one

}

Here is a complete example:

one

two

three

four

.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

}

Effect:

If you use Firefox Grid Inspector to view the distribution of area names and line numbers, you will see that each item occupies two rows and two columns, located in the grid.

Rules for using grid-template-areas

There are some qualifying rules for using the grid-template-areas attribute, and if the rules are broken, the layout is invalid. The first rule is that you must fully describe the grid, that is, consider each cell in the grid.

If a cell needs to be left blank, one or more points must be inserted (for example. Or... You can wait) take up a seat. Note that when using multiple points, there is no space between the points.

So, you can also define it like this:

Grid-template-areas: "one one two two"

"one one two two"

".. four four"

"three three four four"

Effect (demo):

A region name cannot be used on two discontiguous regions. 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"

In addition, you cannot create a non-rectangular area. For example, the definition of an "L" or "T" shaped area is invalid.

Grid-template-areas: "one one two two"

"one one one one"

"three three four four"

"three three four four"

Format string

I like to define the grid-template-areas property in the above way-each line of string corresponds to a line in the grid, which looks intuitive.

Sometimes in order to achieve column-to-column alignment, I choose to use multiple points to specify empty cells.

Grid-template-areas: "one one two two"

"one one two two"

".. four four"

"three three four four"

Of course, it is also valid for strings to be arranged on one line:

Grid-template-areas: "one one two two"one one two two"three three four four"three three four four"

Grid-template-areas and grid-area

Each named area should remain rectangular because each area needs to be implemented based on gridlines-and an area defined with four gridlines must be a rectangle, not a non-rectangle.

Let me first give an example of using gridlines to locate a project:

Item

.grid {

Display: grid

Grid-template-columns: repeat (5, 100px)

Grid-template-rows: repeat (5, 50px)

}

.item {

Grid-column: 2 / 4

Grid-row: 1 / 4

}

Effect:

That is, as long as you specify the following four properties for an item, you can accurately locate its location in the grid:

Grid-row-start

Grid-column-start

Grid-row-end

Grid-column-end

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

Grid-area: grid-row-start grid-column-start grid-row-end grid-column-end

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

}

It 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

}

What's interesting about grid-area is that it can also specify a location area for a project using line numbers and named gridlines.

Use grid-area with line number

The above is about using four line numbers to specify the grid-area attribute. But what if it's not four? -- for example, I only specified the first three, not the fourth value-- in this case, the default value auto, which extends a track by default, is used. Therefore, if you use grid-row-start: 3 for a project, that is, the other three values are set to auto-- the project occupies one row and one column by default:

.item {grid-area: 3;}

Effect:

Grid-area using indent

"indent" is a term for a named region in a grid.

Below I give an example of using named gridlines to specify the grid-area attribute.

.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

}

Notice that I did not specify the value grid-column-end here. The specification mentions that in this case, the value of grid-column-end is copied from grid-column-start, and when grid-column-end is the same as grid-column-start, the grid-column-end value is discarded, and the final result is the same as when you set the line number-- equivalent to setting auto-- to automatically extend a track.

Also, if what is missing is the value of the third property, grid-row-end, it also copies the value of grid-row-start first, and finally equates to setting auto.

The following is a more comprehensive example, listing all the situations:

one

two

three

four

.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

}

Effect:

This also explains why it works well when only one ident value is set for grid-area (actually expanded to 4 values).

Another thing you need to know is that when you use the grid-template-areas attribute to create a named region, the edge gridlines of each area can be referenced by the region name. Let me give an example of a region called one.

The following way to write

.one {

Grid-area: one

}

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

}

If it is the-start attribute, then the one will be resolved to the starting line of the row and column of the region; if it is the-end attribute, then the one will resolve to the end line of the row and column of the area. Of course, this only applies to scenarios where grid-area uses a named range value to specify.

Stack items in layouts that use grid-template-areas

When using grid-template-areas to define regions, each cell can and can only correspond to one name. Of course, after completing the body layout, you can still use line numbers to overlay new items in the layout.

In the following example, in addition to the theme layout, I overlaid an item in the layout based on gridlines:

one

two

three

four

five

.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

}

/ * unlike before, this project is located using a line number * /

.five {

Grid-row: 2 / 4

Grid-column: 2 / 4

}

Effect:

You can also use named gridlines to specify the rows and columns that the project occupies. Even better, when you use grid-template-areas to define a grid region, it actually generates a prefix name with the region name for the four grid lines around the region, the name of the grid line at the beginning of the region is in the form of xx-start, and the name of the grid line that terminates the edge is in the form of xx-end.

Take the named region one as an example, its starting edge is called one-start and the ending edge is called one-end.

In the grid, you can use these implicitly generated named gridlines to locate the project. This is useful in scenarios where you need to redefine the grid layout at different breakpoints, and you want a location item to always be after a line name.

one

two

three

four

five

.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

}

Using grid-template-areas in responsive design

When I am building a component library, I can use the grid-template-areas attribute to accurately see how the components are made up from CSS. Especially when redefining the grid layout at different breakpoints, I can change the number of tracks and regional distribution in the current grid simply by re-assigning the grid-template-areas property.

In the following CSS, the default component is a single-column layout, and when the viewport width reaches more than 600px, I re-assign the grid-template-area property to a two-column layout. The advantage of this approach (as I said earlier) is that anyone who sees this CSS can clearly understand 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;}

Accessibility

One problem with the way the layout is defined using the grid-template-areas and grid-area attributes is that the visual presentation of the elements may not be consistent with the order of the source code. If you are using the Tab button or the language assistant to visit the page, then what you see or hear is in source order, and if the elements in the layout are moved because of the visual needs of poetry, it will lead to visual confusion. Therefore, when moving a project, be sure to pay attention to the relevance between the visual presentation and the source code, so as not to get an inconsistent experience when using auxiliary devices to access.

Thank you for your reading, these are the contents of "how to use grid-template-areas attributes in CSS". After the study of this article, I believe you have a deeper understanding of how to use grid-template-areas attributes in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.