grid布局基础知识

一、grid基础知识：

1、Grid容器属性

1、 grid-template-columns/rows：基于列/行定义网格线和轨道大小；
2、 grid-column/row-gap:列和行的间隙（grid-gap|gap）
3、 grid-template-areas:命名网格区域（配合项目的grid-area属性使用）
4、 grid-auto-columns/rows：隐藏网格的列宽和行高
5、 grid-auto-flow:网格项目的流动方向（默认先行后列）值：row|column;
流动方向为行：可(grid-auto-rows)设置隐藏行高，反之可(grid-auto-columns)设置列宽
6、 justify/align-content:设置项目在网格中的水平/垂直对其方式，
简写：place-content：justify align；值有：start|cneter|end|space-between|space-evenly|space-around
7、 justify/align-items:设置内容在单元格内水平/垂直的对其方式
简写：place-items:justify align；值有：start|end|center

2、Grid项目属性：

1、 grid-column/row-start/end:将项目放于行列网格线起始网格域内；
2、 grid-area:将项目防御网格域内或将项目放于顺时针（top-left-bottom-right）网格域内
3、 justify/align-self:设置某一个特定项目在网格中的水平/垂直的对其方式
简写place-self:justify align; 值有：start|end|center

二、上级实战演练grid布局相关属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 400px;
        height: 400px;
        background-color: #ffff80;
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(2, 100px);
        /* 自动排列方向 */
        /* grid-auto-flow: column; */
        /* 隐式列宽 */
        /* grid-auto-columns: 120px; */
        /* 隐式行高 */
        grid-auto-rows: 100px;
        /* 网格命名 */
        /* grid-template-areas:
          "one one three"
          "four five six"; */
        /* justify-content: center;
        justify-content: start;
        justify-content: end;
        justify-content: space-between;
        justify-content: space-evenly;
        justify-content: space-around;
        justify-items: end;
        justify-items: start;
        justify-items: center;
        align-content: start;
        align-content: center;
        align-content: end;
        align-content: space-between;
        align-content: space-around;
        align-content: space-evenly;
        align-items: center;
        align-items: end;
        align-items: start; */
        /* place-content: space-evenly; */
        place-items: center;
        /* grid-row-gap: 10px;
        grid-column-gap: 20px; */
        gap: 10px 25px;
      }
      .item {
        width: 80px;
        height: 80px;
        background-color: #2d49ce;
        outline: 1px solid #ff0000;
      }
      .item1 {
        grid-column-start: 1;
        /* grid-column-end: 3; */
        grid-column-end: span 2;
        /* grid-row: 1/3; */
        grid-row: 1 / span 2;
      }
      .item2 {
        grid-area: 1/3/3/4;
      }
      .item4 {
        place-self: start end;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
    </div>
  </body>
</html>

总结：

1、grid网格布局：grid-template-rows|columns:常见单位和属性：
常见单位：px % 1fr；
属性：
a、repeat(n,1fr);n重复次数，1fr行或列款，可以设置两个，连续重复例如：repeat（2，100px 200px）;
b、repeat(auto-fill,100px):根据grid容器宽度，自适应填充项目
c、repeat(3,minmax(100px,150px));:设置项目自适应大小
2、grid网格线（命名）别名：可在设置轨道宽度的前方加[]设置网格线别名
例如：grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-end];在不布局项目时，可以设用别名布局：grid-column: c1-start / c3-end;
3、命名网格，也可以使用网格起至线布局项目：例如
grid-area: three-start/3/six-end/4;
4、项目布局时，可以使用偏移量span 3:填充3个单元格
5、命名网格区域，可以使用.占位符；相同名字网格区域会合并；

一、grid基础知识：

1、Grid容器属性

2、Grid项目属性：

二、上级实战演练grid布局相关属性

总结：

相关文章