Grid, the star of future layouts

The Grid is a trend

Grid-layout is not intended to replace Flex-Layout; it complements Flex. Grid is good at two-dimensional layouts, Flex is good at one-dimensional layouts. They need to do their jobs.

Grid-layout, which has been around for a long time, finally became available in some browsers in March 2017.

Don’t use flexbox for overall page layout

The grid = table2.0?

In a 2-d layout, you can arrange content in rows and columns. Divide the page into blocks, specifying the size, location, and hierarchy of the different content blocks.

The argument that grid is like table2.0 is that they have something in common. For example, they arrange elements in rows and columns. But the difference between a table and a grid is that a table has a content structure, and you can’t lay it out very freely. Elements within the grid can be placed freely, allowing overlap and hierarchy.

Several terms

Grid-container

The grid container establishes a new grid formatting context for its content, which is the boundary of the internal grid item.

The grid – line grid lines

Horizontal and vertical lines are divided to construct grid tracks, grid cells and grid regions. Like longitude and latitude, it divides the northern and southern hemispheres, the eastern and western hemispheres, the tropics, the northern and southern temperate zones, and the northern and southern cold zones. Grid lines are numerically indexed and can be named themselves. Longitude and latitude are numbered and can be named, such as the prime meridian and the equator.

Grid-track

The horizontal or vertical space between blocks of grid content. Binsheng, Binhe, Binxing, Binan, Binkang, Jiangling, Jianghui, Jianghan, Jianghong. (Classic name of suburb, Stand hand)

Grid cell grid-cell

The unit block of grid content is the smallest block where content can be placed. For example, if a page is divided with three vertical and horizontal grid lines, then a cell is one of the nine grids

Grid-area grid area

Delineate an area bounded by a grid line. Originally netease and Alibaba occupy one cell, but now they have to expand and occupy two, which add up to their respective grid areas.

Two examples

Before we look at the specific properties, let’s take the simplest example

It’s interesting to look at the grid this way, first dividing it into blocks and then specifying the extent of each block. Blocks can overlap. But that’s just the beginning. Grid brings 17 new features to the table. Before we get into properties, let’s take another example of a classic layout scheme, Holy Grail Layout.

Common layout of web pages: header, footer, main content block, side column on both sides.
Fixed width on both sides, variable width in the middle
The middle three columns are of equal height
The footer is always at the bottom of the window, even if the content doesn’t fill the entire height of the window
Responsive layout with all modules displayed 100% width in smaller Windows

You can quickly code this interface in your head and write a style, not too complicated but not too simple. So what does grid do

// key code .hg__header { grid-area: header; } .hg__footer { grid-area: footer; } .hg__main { grid-area: main; } .hg__left { grid-area: navigation; } .hg__right { grid-area: ads; } .hg { display: grid; grid-template-areas:"header header header"
                            "navigation main ads"
                            "footer footer footer";
    grid-template-columns: 250px 1fr 300px;
    grid-template-rows: 100px 
                        1fr
                        80px;
    min-height: 100vh;
}Copy the code

Steps:

Define the grid
1. Set the grid area alias, grid-area:, to be referenced when specifying the block area. In the previous simple example, grid-area is used to specify the upper, lower, left, and right grid lines of a grid area.Grid-area can specify the size and location of a grid area, as well as the alias of the area.
```
 grid-area: main;
     grid-row-start: main;
     grid-column-start: main;
     grid-row-end: main;
     grid-column-end: main;Copy the code
```
2. grid-template-areas: “- – -” “- – -” “- – -“; You can specify the layout of the grid very intuitively. Its value is a space-delimited array of strings, each representing a line. Each string contains a space-delimited list of grid cells, and a grid region is written several times across several columns. For example, header and footer are written three times, which span the entire width of the region.
Set the height and width of the cell

There’s a new unit of CSS3, FR, that appears in a string of numbers to represent the proportion of the remaining space in some direction. Set the line height when the line is written for clarity.
Set the footer of the fixed position
Responsive layout, using media queries. Reset layout and row height

grid-container

1. grid-template-columns | grid-template-rows

Grid-template-columns:defines the number of rows, columns and size of the grid.

There are many forms, the common ones are as follows:

grid-template-columns: 100px 1fr; grid-template-columns: [linename] 100px; Grid-template-columns: [linename1] 100px [linename2 linename3]; Grid-template-columns: minmax(100px, 1fr); Grid-template-columns: fit-content(40%); // Max. 100px, Max. Full screen grid-template-columns: fit-content(40%); Grid-template-columns: repeat(3, 200px); / / three columns 200 pxCopy the code

Box {grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; }Copy the code

2. grid-template-areas

Define a grid area and place the corresponding grid item using the grid-area call with the declared grid area name. Define an explicit grid region.

3. The grid – row – gap, the grid – column – gap

Define spacing between grids (not including spacing between grid-Items and container edges)

4. The justify – items: start | | end center | stretch (default).

Define horizontal alignment of the content of grid child items, similar to justify-content of flex-Container, but without space-around and space-between

5. The align – items: start | | end center | stretch (default).

Defines the vertical alignment of the content of grid sub-items, similar to the align-items of flex-Container

6. justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

Specify the alignment of the grid in the container with the vertical axis when the size of the grid container is greater than the total size of the grid, such as when each grid subitem has a fixed value. The differences of the following three attribute values are as follows:

Space-around: The space between the beginning and the end is half the space between the grid
Space-between: The space between the start and end is zero
Space-instituted: The spacing between the beginning and end is equal to the spacing of the grid

7. align-content: start | end | center | stretch | space-around | space-between | space-evenly;

Perpendicular to justify-content, specifies the alignment of the grid and horizontal axis.

8. The grid – auto – the columns, the grid – auto – rows; grid-auto-flow

The grid – auto – columns | grid – auto – rows role grid cell is not enough time to create an implicit mesh placed the grid – item. Let’s look at an example

We just define a 1×1 grid container, box1 comes in, and then what about the other three? Leak out. Box2 is then rendered behind Box1 to the right of the screen, with Box3 and Box4 rendered below, at content height only.

Grid-auto-columns: 200px; grid-auto-rows: 200px; Create more implicit 200 by 200 grid cells horizontally and vertically in the container to hold any additional elements.

Related to this is another property, grid-auto-flow, which controls the automatic layout algorithm, where the extra elements are arranged left to right and top to bottom when we don’t set this property.

grid-auto-flow: row | column | row dense | column dense;

Row is the default value, which means that the automatic layout algorithm populates each row in sequence, adding new rows only when necessary.
Column represents that the automatic layout algorithm populates each column in turn, adding new rows only when necessary.
The Dense representative told the automatic layout algorithm to try to fill in holes in the grid if smaller subitems appeared. (Not recommended, may cause layout confusion)

grid-item

1. grid-column-start | grid-column-end | grid-row-start | grid-row-end

grid-row: grid-row-start / grid-row-end
grid-column: grid-column-start / grid-column-end | grid-column-start | span <value>Copy the code

If grid-column-end/grid-row-end is not explicitly set, the grid subentries will default across a grid cell. In addition, the grid items can overlap with each other, and you can use z-index to control their cascading order.

There are some elements that we want to run through the viewport, such as headers, footers, and, for small screens, two columns:

.header, .footer {
  grid-column: 1 / 3;
}Copy the code

Unfortunately, when we move to a larger screen with 12 columns in a row, these elements will fill only the first two columns, not the 12th. We need to define a new grid-column-end and set it to 13. Grid-column: 1 / -1; grid-column: 1 / -1; “So they fill the entire line at any screen size. Like this:

.header, .footer {
  grid-column: 1 / -1;
}Copy the code

2. grid-area

grid-area: <name> | grid-row-start / grid-column-start / grid-row-end / grid-column-end

3. The justify – self: start | | end center | stretch, the horizontal alignment of grid cell contents. And context-self in Flex.

4. The align – self: start | | end center | stretch vertical alignment grid cell contents. Similar to align-self in Flex.

Functions brought by grid-Layout

1. repeat()

Repeat () provides a compact declaration. If there are too many lines and the distribution is regular, we can use a function to arrange the grid lines.

grid-template-columns: repeat(3, 20px [col-start]) 5%; // Equivalent to grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 20px [col-start] 5%; }Copy the code

2. minmax()

Minmax () is equivalent to specifying a minimum to maximum interval for grid-line intervals. If min> Max, this interval is invalid and min is displayed.

3. fit-content()

Fit-content () equals min(‘max-content’, Max (‘auto’, argument));

Another problem with flex layout

Another problem is that in the case of large amounts of content being drawn to the page, or content being changed, the page is unstable during 2g or network loading. Flexbox vs Grid Page Layout. The user can see the content before the page is fully loaded, but with flex layout this results in layout rearrangement. Flex is an elastic layout. But the Grid isn’t completely immune to layout rearrangements — if:

Make sure your mesh is predetermined, such as depending on window width. If it is based on content, it will be broken.Copy the code

In the following example, the column width of the grid depends on the content, and therefore will vary depending on the content. The following aside is not defined in the grid container; it is a dynamically created element. Once created, it causes the page to be redrawn

.container {
    display: grid;
    grid-template-columns:
    (foo)   max-content,
    (bar)   min-content,
    (hello) auto;
}

aside {
    grid-column: 4;
}Copy the code

But don’t give up on Flex-Layout, which is by far the best page layout property, the result of the call of the day, but doesn’t fit the entire page frame. Flex is critical in responsive layouts, which are content-driven. You don’t need to know in advance what’s going to be there, you can dictate how elements allocate the remaining space and how they behave when they run out of space. What appears to be more powerful is the ability to do one-dimensional layouts, whereas Grid’s advantage is in two-dimensional layouts. That’s what they designed it for.

As grid layouts become widely supported, you can probably expect to see a lot of flex layouts embedded in grid layouts.

Subgrid doesn’t have browser support yet and the specification is in the works, so I won’t cover it.

reference