When I wrote the page layout today, I suddenly thought of the grid layout. I was used to the flexible layout in the past, and then I found that the grid layout is a bit fragrant, and then I simply sorted it out for learning and sharing.

1. What is grid layout

It can be understood as dividing an element into rows and columns, and then setting the corresponding size, layout, and position.

Second, the basic syntax of grid layout

Declaration grid

display: grid;
display: inline-grid;

Divide ranks

Use grid-template-columns to divide the number of columns
Use grid-template-rows to divide the number of rows

Code display and description

Assuming a requirement, in a container, the left and right lists display 4 columns and 2 rows by default. (The drawing is a bit ugly, hahahaha)

Pages are drawn using a grid layout.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="content">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>

  </div>
</body>

</html>
<style>
  .content {
    width: 300px;
    height: 200px;
    background: #fff;
    border: 3px solid #F2F30E;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 25% 25% 25% 25%;
    justify-content: center;
  }
  .item{
    border-bottom:1px solid red  ;
  }
</style>

The above code finds that the height of the page exceeds 25%, that is because the property outside the container is not set to 25%, the solution: set the rest of the row size.

  grid-auto-rows:25% ;

Replenish

Set the size according to px, auto is automatic filling (percentage can also be used)

div {
  grid-template-rows: 100px 100px;
  grid-template-columns: 100px 100px 100px;
}

Set a uniform value through repeat

div {
  grid-template-rows: repeat(2, 50%);
  grid-template-columns: repeat(2, 50%);
}

Automatic filling via auto-fill

div {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: repeat(auto-fill, 100px);
  grid-template-columns: repeat(auto-fill, 100px);
  /* 两行三列 （300/100,200/100） */
}

Use fr to set the scale

div {
  width: 300px;
  height: 100px;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr 2fr);
}

Short form

/** 简写形式 */
grid-template: 10vh 20vh 10vh/ 30vw 1fr;
grid-template: repeat(3, 100px) / repeat(3, 100px);

Row and column spacing

row-gap line spacing
coliumn-gap column spacing
gap combination definition

row-gap: 30px;
column-gap: 20px;
gap: 20px 10px;
gap: 20px;/*行列间距都为20px*/

element positioning

style attribute	illustrate
grid-row-start	row start grid line
grid-row-end	line ending grid line
grid-column-start	Column Start Grid Line
grid-column-end	Column end gridline

grid-row-start/grid-column-start/grid-row-end/grid-column-end

grid-area: 2/2/4/4;/* 2行2列开始，4行4列结束*/

grid alignment


justify-content    所有栅格在容器中的水平对齐方式，容器有额外空间时    栅格容器
align-content    所有栅格在容器中的垂直对齐方式，容器有额外空间时    栅格容器
align-items    栅格内所有元素的垂直排列方式    栅格容器
justify-items    栅格内所有元素的横向排列方式    栅格容器

3. Expansion

If you don’t understand, you can communicate with each other, or check the official website. This article is more suitable for the author’s own record and summary.

CSS grid layout (Grid)