grid 布局

• MDN Docs
• cssgr
• 设置纵横比

3列任意行

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); // 三列，每列1fr，自动填充宽度，类似: flex: 1
    
    grid-gap: 10px; // 每列每行之间的间隙为10px, 语法: [<grid-row-gap>, <grid-column-gap>] 同时设置两个
    // grid-column-gap: 10px; // 单独设置列之间的间距
    // grid-row-gap: 5px; // 单独设置行之间的间距
}

单独定义每列的宽度

.grid {
    display: grid;
    grid-template-columns: 100px 1fr 100px;   // 三列: 100px 1fr自动填充 100px
    // grid-template-columns: 50px repeat(2, 1fr) 50px; // 这是4列: 50px 1rf 1rf 50px
    grid-gap: 10px; // 每列每行之间的间隙为10px
}

定义子元素的溢出

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); // 定义三列的表格
    grid-gap: 10px;
}

.span-col-3{
    grid-column: span 3 / auto; // 此子元素的宽度将占据3列，默认是auto
}
.span-row-2{
    grid-row: span 2 / auto; // 此子元素的高度将占据2行，默认是auto
}

定义行

      body {
        height: 100vh;
        margin: 0;
        display: grid;
        grid-template-rows: auto 20px 20px; // 定义三行,每行的高度分别是: auto(flex: 1) 20px 20px
        // grid-template-rows: auto; // 对每一行都将起作用, 平分父节点的高度
      }

grid-auto-rows: minmax(100px, auto); // 行最小和最大值


// 改变网格线
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;

格子对齐盒子

align-self: start; 向上看齐
align-self: end; 向下看齐
align-self: center; 垂直居中
align-self: baseline; 也是向上看齐
align-self: stretch; 也是向上看齐,并让子项目填充flex项目的高度

子元素居中

      body {
        display: grid;
        padding: 0px;
        margin: 0px;
        height: 100vh;
        /* justify-items: center;
        align-items: center; */
        place-items: center;
      }

grid-template-areas 文档

grid-template-areas CSS 属性是网格区域 grid areas 在CSS中的特定命名。

  display: grid;
  grid-template-columns: 80% auto;
  grid-template-rows: auto auto;
  // 下面是两行两列
  grid-template-areas:
    "title switch"
    "content .";