Grid layout do you really know?

Grid Grid Layout

Overview: Grid will be divided into a container grids, through any combination of different grid layout want to make you think

Grid and flex similar layout, the whole Grid into the container with child (grid)

Grid three important concepts container:

Rows and Columns
Cell
Gridlines

Rows and Columns

Concept Concept systems and raster rows and columns similar to

Cells aligned in one row in the horizontal direction all the way

Made into a cell in the vertical direction along a

Cell

As a minimum unit of the container, the Grid mesh composed of one cell

Gridlines

For separating the cell line of intersection. The cell gridlines each row, each column are partitioned among full closed rectangular

Each row, the number of each of the grid lines is the current number of rows and columns plus one; closed Well

Grid lines is also a factor in controlling the cell size;

Grid container attribute ( common )

　　1. Specify a Grid container　　　　

　　display property values:

　　　　Grid : Specifies element using a grid layout, default block element container is a separate line

　　　　inline-grid: designated row within Grid

　　2. Set Grid number of rows and columns

　　grid-template-rows: Specifies the number of lines

　　grid-template-columns: Specifies the number of columns

Do a 3 x 3 grid

.container{
width: 300px;
height: 300px;
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
background-color: #123456;
margin: 200px;
}
.container div{
width: 100px;
height: 100px;
background-clip: content-box;
padding: 5px;
border: 1px solid #fff;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>

Properties may also be used in combination: Grid-Template

grid-template: 100px 100px 100px/100px 100px 100px;

The new unit fr

　 fraction of the acronym meaning " fragments " . It will be appreciated that the current cell occupied by the row / proportion column,

The code can be changed

grid-template-rows: 1fr 1fr 1fr;

grid-template-columns: 1fr 1fr 1fr;

If the number of rows or columns under a particularly large number of cases, the write is especially cumbersome;

Ever since there was a repeat () function

grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);

repeat()

The first parameter is set rows / columns

The second parameter is set for each row / column in the current share of share of container

The second parameter can fill a plurality of values

grid-template-rows: repeat(3,1fr );
grid-template-columns: repeat(3,1fr 50px);

Look at the results:

understanding:

The container is divided . 3 columns, each column has been divided into 1fr and 50px , that is to say divided into . 6 columns

Content area for the element 1 accounted for 1fr + 50px in 1fr

Content area for the element 2 accounted for 1fr + 50px is 50px

So the question is, why 6 is complete?

In fact, every div is complete, only 2 half were 3 covered it

6 half beyond the grid container

Why 359 will cover a front div it?

It goes to the action of the grid lines, grid lines not only the role of each cell division

While cell division is also specifies the starting position in the horizontal and vertical directions of each single cell and an end position

3 actually is in position 1fr + 50px position here, i.e. the second column of the cable, the end position is the third grid lines

Cell distribution and a good review can see elements of gridlines

minmax () sum auto

auto cell width / height adaptation

grid-template-rows: repeat(3,1fr );
grid-template-columns: 50px auto 50px;

The second column of this excess width will vary Grip change change container

The third column will change gridlines

() MINMAX cell width / height ( min , max endo) range

grid-template-rows: repeat(3,1fr );
grid-template-columns: 50px minmax(120px,1fr) 50px;

Here 1fr indicates the remaining positions. Because there is no other columns occupy the remaining space.

If the maximum value exceeds the portion grip capacity of the container, only the maximum remaining capacity allocation

3. Grip-GAP : set the row / column directly gap

GAP-Grip : 5px 5px rows gap 5 column gap 5

Shorthand: Grip-GAP : 5px

You can also write two separate properties

grid-column-gap：5px;

grid-row-gap：5px;

4. Grid-Template-Areas : designated area within the grid

Attribute must be changed with child in grid-area used

Area-Grid : Used to specify the name of the region

You can put grid-area as a canvas, the grid-area designated as a regional block painting

To get the layout you want by mosaic picture blocks;

You can easily make a layout (and size can be adaptive)

code show as below:

.container{
width: 100vw;
height: 100vh;
display: grid;
grid-template: repeat(4,1fr)/repeat(4,1fr);
grid-template-areas: "hl m m hr"
"hl m m hr"
"al al ar ar "
"f f f f ";
background: #eee;
grid-gap: .7em
}
.container .main{
grid-area: m;
background-color: #f1c40f
}
.container .asideL{
grid-area: al;
background-color: #4ff10f
}
.container .asideR{
grid-area: ar;
background-color: #0ff1cb
}
.container .headerL{
grid-area: hl;
background-color: #0f26f1
}
.container .headerR{
grid-area: hr;
background-color: #9e0ff1
}
.container .footer{
grid-area: f;
background-color: #f10f1a
}

<div class="container">
<div class="main"></div>
<div class="headerL"></div>
<div class="headerR"></div>
<div class="asideL"></div>
<div class="asideR"></div>
<div class="footer"></div>
</div>

Suddenly feeling actually so simple page layout

Note: In the grid-template-areas within the designated area must be named rectangle, or browsers do not render

grid-template：是grid-template-columns、grid-template-rows和grid-template-areas

5. The Grid-Auto-Flow : setting the direction of cell arrangement.

Property values:

Row : from the horizontal direction from left to right (the default)

column : from the vertical direction from the top-down arrangement

row dense: arranged horizontally from the left to the right, automatically fill the space, filled as much as possible

Dense column : from the vertical direction from the top downward, so far as possible filled

6. The The justify-items / align = left-items : setting within the cells in the horizontal direction / the vertical direction of its embodiment

Property values:

Start : start aligned with the edge of the cell.

End : alignment of the cell's end edge.

Center : internal grid cell center.

Stretch : stretching the entire width of the (default) filled cell

place-items are justify-items and align-items combined properties

7. The The justify-Content / align = left-Content : setting grid all cells within the grid in the horizontal direction / the vertical direction of its embodiment

Property values:

Start : alignment of the container starting border.

end: end of frame alignment of the container.

center: the inner container is centered.

stretch: when the project size is not specified, a tensile occupy the entire grid containers.

space-around: at equal intervals on both sides of each item. Therefore, the gap between the project twice the size of the project and the interval border of the container.

BETWEEN-Space : distance from project to project equal, there is no gap between the item and the container frame.

space-evenly: interval equal to project to project, is the same length of the interval between the item and the container frame.

place-content is align = left-conten T and justify-content of the combined properties .

Grid project properties ( common )

1. Grid-column / Grid-Row : The specified cell location gridlines

background-color: red;
grid-column: 2 / 3;
grid-row: 1 / 2;

Is meant herein that the cell

X share in the direction of the second position to a third root root gridlines gridlines

Y occupies the first position in the direction of the grid line to the third root root gridline

2. Grid-Area : area specifying unit cell in that

grid-area: is Grid-column / Grid Row- synthetic nature

grid-area: 1/2/2/3;

You can also specify which named range , with a grid-template-areas use

3. The justify Self- / align = left Self- : alignment of cell content

Start : start aligned with the edge of the cell.

End : alignment of the cell's end edge.

Center : internal grid cell center.

Stretch : stretching the entire width of the (default) filled cell.

Grid Grid compatibility issues:

If you have questions about the content, discussions and exchange welcome

Reference links:

http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

https://www.jianshu.com/p/21fc2c091b98

Grid layout do you really know?

Guess you like