The grid area of the CSS layout

So far, grid projects have been placed in separate cells, but we should break this limitation so that grid projects can go beyond the cell interface to achieve more useful layouts. Let's see how this is achieved in this section.

Defining a grid area

Here's a grid we've been trying to implement: Nine grid items are divided into three equal and equal rows of grids, with a 20px spacing between columns and columns and rows and rows.

　　

Currently, only some color styles are set for the grid project, but according to the first section of the tutorial, we can add grid-column and Grid-row style rules based on this:

　　

Grid-column is actually the abbreviation for Grid-column-start and Grid-column-end, which tells the grid project. Item-1 from Grid line 1 to Grid line 3 ends.

　　

The following example shows that the first grid item spans two cells, while the other grid items automatically align to the right and down, and the entire process is automatically calculated by the grid.

　　

　　

It can also be used on grid-row to allow cells to span several lines:

　　

　　

Cross Cell

You can use a more simple syntax to use a keyword span in grid-column-end. Span tells us the number of cells to span, without specifying the end of the grid line.

　　

So get the effect and the previous use

　　

The results are the same.

　　

In the following example, we have removed four grid items. The location of the two grid projects was dealt with. The first grid item has rows and columns that span 2 cells, and the fourth grid item is in the second row of the third column, and the rows are spanned by two cells.

　　

　　

Other grid items are automatically populated with free space. This only highlights the advantages of the grid layout and does not reflect the order in which the elements are sourced.

Note: In some cases it is also important to reflect the order of origin, and let us not forget that there may be many people with disabilities on your Web page, so there are a lot of situations where there is a need to consider the design of accessibility.

Cell spanning in a grid is actually similar to a merged cell in a table, such as a colspan merge column, rowspan a merge row.

Declaration Area

So far, we have used the digital description to make the grid work well, but the grid template area (grid templates areas) can make the layout more intuitive.

Specifically, you can name the grid region. Use these named grid areas (instead of the number of gridlines) to position the grid items. The next example is to use the name of the grid area to create a rough page layout, which mainly includes:

• Header (page header)

• Main content (main contents)

• Sidebar (side bar)

• Footer (footer)

• 
  

We need to define the names of these grid regions on the grid container, just as if we were drawing a layout here:

　　

Grid Project Positioning

Now we want to focus on grid projects, where Grid-area is used instead of the grid-column and Grid-row rules used earlier:

　　

The first grid item is the page header, which spans three headers. The second item is assigned to the main content area, the third one is the sidebar, and the fourth is the footer. These do not need to be used in sequential sources (document flow). We can easily turn the. item-4 into a page header.

　　

As you can see, this makes the Web layout easier. In fact, the above example intuitively expresses the name of the grid region we need, but we can also do a bit more to declare the area of the grid with some emoticons.

　　

The effect is as follows:

　　

Grid area Nesting

Many times, Web pages have a variety of nesting, so let's take a look at how to use grids to implement this nested layout.

When we use Display:grid, we have declared a grid container, as long as its descendant elements are automatically the grid project. Content added to these sub-elements is not affected at all, unless we display a reset.

In the next example, place the. item-5,. item-6, and. Item-7 inside the. Item-2:

　　

So we just need to put. Item-2 is also declared as a grid container, and is a grid of two rows and two columns:

　　

Here we can continue to use headers, article, and sidebar to name the grid region. Does not cause unnecessary trouble, because it all has to do with its context. These grid areas are only available in the. item-2 grid.

　　

Summarize

Briefly summarize what was discussed earlier:

• GRID-COLUMN is an acronym for Grid-column-start and Grid-column-end, a simple way to define the start and end of a grid project

• Grid merging can be achieved using span keywords to make rules more flexible

• Use Grid-template-areas to declare a grid range name, and even use emoticons to declare a grid area

• You might use Display:grid in a grid project to declare that the grid item is a grid container that implements the nesting of meshes

• 
  

Through this article, we've learned some of the specifications for CSS grid layouts, which let us use CSS grids to make layouts more and more near to reality. In the next tutorial, we'll look at some of the complex layouts.