An overview of the

The Grid divides the container into grids and creates the layout you want by arbitrarily combining different grids. The Grid is similar to the Flex layout, dividing the entire Grid into containers and sub-items (grids).

The Grid container has three important concepts

1. Rows and columns

2. The cell

3. The grid lines

Rows and columns

The idea of rows and columns is similar to the idea of a grid system where cells are arranged horizontally in a row and vertically in a row

The cell

As the smallest unit of a container, a Grid Grid consists of individual cells

Grid lines

A cross line used to separate cells. The number of grid lines per row and column is the current number of rows and columns plus one grid line is also one of the factors controlling the cell size

Grid Container properties (common)

1. Specify a Grid container

Display attribute value:

  • Grid: Specifies a grid layout for an element. By default, containers are block-level elements that occupy a single row
  • Inline-grid: Specifies an inline grid

2. Set the number of Grid rows and columns

  • Grid-template-rows: specifies the number of rows
  • Grid-template-columns: specifies the number of columns

Let’s make 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;
}
Copy the code
<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>
Copy the code

You can also use the combined attribute: grid-template

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

The new unit FR: fraction stands for “fragment”. This can be interpreted as the ratio of the current cell to the row/column

The above code can be changed

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

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

If you have a very large number of rows or columns, this becomes particularly tedious

This creates a repeat() function

repeat()

  1. The first argument is to set the number of rows/columns
  2. The second parameter sets the share of the current container for each row/column

The second parameter can be filled with multiple values

The grid – the template – rows: repeat (3, 1 fr);

The grid – the template – the columns: repeat (3, 1 fr 50 px);

Let’s start with the result: I’ve changed the color of each element to make it easier to distinguish

To understand:

The container is divided into 3 columns, and each column is divided into 1Fr and 50px, which means it is divided into 6 columns

  • Elements with content area 1 account for 1FR of fr+50p
  • The element with content area 2 takes up 50px of 1fr+50px

So the question is, why is 6 complete

  • Every div is complete, but half of 2 is hidden by 3, and half of 6 is outside the grid container

Why does 3, 5, and 9 cover up the previous div

  • This brings us to the role of grid lines, which do more than just divide each cell
  • While dividing cells, the grid line also defines the starting and ending positions of each single cell in the horizontal and vertical directions. The actual position of 3 is 1FR +50px, which is the position of the second line and the ending position of the third grid line

Review elements for a good look at the grid lines and cell distribution

The role of grid lines will be discussed later

Minmax () and auto

  1. Auto Cell width/height adaptive

The grid – the template – rows: repeat (3, 1 fr);

grid-template-columns: 50px auto 50px;

  • The extra width of the second column changes as the Grip container changes
  • The third column grid lines will change

  1. Minmax () Cell width/height within (min, Max)

The grid – the template – rows: repeat (3, 1 fr);

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

So 1FR here is the rest of the position. Because there’s no other column taking up space. If the maximum part exceeds the capacity of the GRIP container, only the maximum remaining capacity is allocated

3. Grip -gap: Sets the direct gap between rows and columns

  • Grip-gap: 5px 5px row gap 5 column gap 5

  • – Grip -gap: 5px

You can also write two attributes separately (normal people probably don’t do this).

  • The grid – column – gap: 5 px;
  • The grid – row – gap: 5 px;

4. Grid-template-areas: Specify areas within the grid

The modified attribute must be used in conjunction with grid-area in the child

  • Grid-area: Specifies the name of an area

You can think of grid-area as a canvas. You can use grid-area as a drawing block to get the desired layout.

You can easily make the following layout (and the size can be customized)

.container{
width: 100vw;
height: 100vh;
display: grid;
grid-template: repeat(4, 1 fr) /repeat(4, 1 fr);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
}
Copy the code
<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>
Copy the code

Suddenly the page layout feels so simple

Note: The named areas specified in grid-template-Areas must be rectangles, otherwise the browser will not render

Grid-template: is a compound attribute of grid-template-columns, grid-template-rows, and grid-template-areas

5. Grid-auto-flow: Sets the direction of cell arrangement.

  1. Row: arranges horizontally from left to right (default)
  2. Column: the columns are arranged vertically from top to bottom
  3. Row dense: Arrange from left to right in a horizontal direction, automatically fill the Spaces as full as possible
  4. Column dense: Arrange vertically from top to bottom, as full as possible

6. Justify -items/align-items: Sets the horizontal/vertical orientation of the cell against it

  1. Start: Aligns the beginning edge of the cell.
  2. End: Aligns the end edge of the cell.
  3. Center: Cell is internally centered.
  4. Stretch: stretches to fill the entire width of a cell (default)

Place-items is a combination of context-items and align-items

7. Justify -content/align-content: Sets the horizontal/vertical orientation of all cells in the grid

  1. Start: Aligns the start border of the container.
  2. End: Aligns the end border of the container.
  3. Center: the container is centered inside.
  4. Stretch: When the project size is not specified, stretch takes up the entire grid container.
  5. Space-around: Equal spacing on both sides of each item. As a result, the space between items is twice as large as the space between items and the container borders.
  6. Space-between: Equal spacing between items, with no spacing between items and container borders.
  7. Space-instituted: An item evenly spaced with an item, and an item evenly spaced with a container border.

Place-content is a combined attribute of align-content and context-content.

Grid project properties (common)

Grid-column /grid-row: Specifies the location of the cell according to the grid line

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

This means the cell

  • The position occupied in the X direction is the second to the third grid line
  • The position occupied in the Y direction is the first grid line to the third grid line

Grid-area: Specifies the area in which the cell is located

Grid-area: is a composite property of grid-column/grid-row

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

You can also specify which named areas to use with grid-template-areas

2. Justify self/align-self: the alignment of cell content

  1. Start: Aligns the beginning edge of the cell.
  2. End: Aligns the end edge of the cell.
  3. Center: Cell is internally centered.
  4. Stretch: stretches to fill the entire width of a cell (default).

Grid compatibility problem:

Write for the first time, if you think this article is helpful to you, remember to like oh!!

Reference links:

www.ruanyifeng.com/blog/2019/0…

www.jianshu.com/p/21fc2c091…