New front end layout: Grid layout!

In layman’s terms, a Grid layout is similar to a table (Grid) layout, with small modules (sub-divs) arranged in their own way within a container (large div). A Grid layout is similar to, but much simpler than, a Flex layout.

Note: left and right can be indistinguishable, row (horizontal) and column (vertical) can not!

① Knowledge generalization of the first node:

display:grid; Grid-template-columns: column 1 width, column 2 width, column 3 width... ; Grid-template-rows: row 1 height, row 2 height, row 3 height... ;Copy the code

Operation:

HTML code:

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>
Copy the code

The CSS code:

// Container style. Container {width:300px; // Important three lines of code display: grid; grid-template-columns:100px 100px 100px; grid-template-rows:100px 100px 100px; } // submodule style. Box {color:white; line-height: 100px; text-align: center; font-weight: bold; } // Submodule color: for visual identification. box:nth-of-type(odd){background:darkcyan; } .box:nth-of-type(even){ background:pink; }Copy the code

Take a look at the results:

Explanation:

Here you can see that with the code (the three important lines) we have formed this state into something like a table.

Note here that although the effect is the same as display: Flex, in the CSS style, the width and height of the sub-modules (sub-divs) are not set, but are automatically generated.

• Display: grid: Form the container into a grid layout.
• Grid-template-columns :100px 100px 100px: Set the column width of each module in the container to 100px.
• Grid-template-rows :100px 100px 100px: Set the row height of the modules in the container to 100px for each row.

So: This container forms a 3 by 3 table, and when you don’t set the width and height of the submodule, it automatically fills up the area it occupies (this is the cell).

At this point, some people may have a lot of bold guesses and ideas:

Idea 1: I wrote three divs, but what if I only had two. As follows:

.container{
    grid-template-columns:100px 100px;
    grid-template-rows:100px 100px;
}
Copy the code

Effect:

Explanation: When you set the table to 2 * 2, multiple divs are automatically arranged down and spread out.

② Knowledge generalization of the second node:

Grid-template-columns: the percentage of columns in the first module, the percentage of columns in the second module... ; Grid-template-rows: % grid-template-rows: % grid-template-rows: % grid-template-rows... ; Grid-template-columns :repeat(number of repeats, width of module columns..) ; Grid-template0 -rows:repeat(number of rows, block height, block height...) ; Grid-template-columns :repeat(auto-fill, module column width); Grid-template-rows :repeat(auto-fill, module row height); grid-template-rows:repeat(auto-fill, module row height); grid-template-columns:1fr 2fr 1fr 2fr; grid-template-roes:1fr 2fr 1fr 2fr;Copy the code

This node mainly describes the various ways of writing these two attributes:

The first (percentage) :

HTML code:

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>
Copy the code

The CSS code:

// Color code omitted... Container {height:400px; display:grid; grid-template-columns:33% 33% 33%; grid-template-rows:33% 33% 33%; }Copy the code

Here I don’t set the width of the container, only the height. The default container width is 100%, which makes the layout elastic.

Second (simple) :

Grid-template-columns: can’t be set as many times as possible. As follows:

HTML code:

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>
Copy the code

The CSS code:

// Color code omitted... .container{width:500px; display:grid; The grid - the template - the columns: repeat (2100 px, 150 px); The grid - the template - rows: repeat (2150 px, 150 px); }Copy the code

The effect is as follows:

Third (adaptive repetition) :

HTML code:

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>
Copy the code

The CSS code:

// Color code omitted... .container{width:500px; display:grid; grid-template-columns:repeat(auto-fill,100px 150px); grid-template-rows:repeat(auto-fill,100px); }Copy the code

The effect is as follows:

Fully adaptive columns and rows, no redundant grids.

Fourth (equivalent to percentage distribution) :

HTML code:

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>
Copy the code

The CSS code:

// Color code omitted... .container{width:500px; display:grid; grid-template-columns:1fr 2fr 1fr 2fr; grid-template-rows:1fr 2fr 1fr 2fr; }Copy the code

The effect is as follows:

Fr can be understood as a multiple, equivalent to flex layout after flex: multiple; In the figure above, 500px is divided into 6 parts: 1 part, 2 parts, 1 part, 2 parts.

Of course FR can be mixed with PX:

.container{
    width:500px;
    display:grid;
    grid-template-columns:200px 100px 1fr 2fr;
    grid-template-rows:repeat(auto-fill,100px);
}
Copy the code

Effect:

Explanation: Except the 300px of module 1 and 2, the remaining 200px is divided into three parts, with module 3 accounting for 1 part and module 4 for 2 parts.

Subsequent…