2020-03-12 CSS-grid之网格布局

grid布局简介

• CSS Grid布局是一个二维的布局系统
• CSS Grid 相比传统布局在页面整体划分布局上更加出色
• CSS Grid 并不是只能单独使用，依然可以搭配Flexbox以及传统定位布局一起使用 总的来说，Grid布局就是父元素：定框架——设间隔——找对齐；子元素：摆位置——找对齐

布局属性

给容器元素添加display:grid或display:inline-grid即创建了网格容器(Grid)，整体呈现一个二维布局

1. grid-template-columns-确定容器多少列，以及每一列的宽度大小

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px; // 容器布局为三列以及宽度，行数自动判断
}

2. grid-template-rows-确定容器的行数，以及每一行的高度大小

.container {
  display: grid;
  grid-template-rows: 100px 50px 100px;  // 容器布局为三行以及高度
  grid-template-columns: 100px 100px 100px; // 容器布局为三列以及宽度
}

3. fr-均分容器的宽度

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  // 容器宽度均分为三份
}

4. repeat()-来标记轨道重复使用的部分

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  // 重复三次
}

5. grid-auto-rows-确定每行的高度，如grid-auto-rows:100px
6. minmax()-让每行的高度随着内容自动填充，那么可以使用minmax()来确定最小值与最大值

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

7. Grid Line(网格线)-主要用来确定一个子元素要占有的面积，也成为Grid Area
8. Grid Cell(网格单元)-可以简单理解为一个table中的一个单元格
9. Grid Area(网格面积)-通过规定一个item的起始行和起始列来规定一个area，注意：area必须为一个 规则的举行，而不能为一个类似于L形状的图形 10.Grid Gutters(网格间距)- 分为行间距和列间距，类似于table中的colspan和rowspan

给线命名：

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

举例：

<div class="wrapper">
        <div class="box1">One</div>
        <div class="box2">Two</div>
        <div class="box3">Three</div>
        <div class="box4">Four</div>
    </div>

<style>
        .wrapper {
            display: grid;
            grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
            grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
        }
        
        .box1 {
            grid-column-start: main-start;
            grid-row-start: main-start;
            grid-row-end: main-end;
            background: yellow;
        }
        
        .box2 {
            grid-column-start: content-end;
            grid-row-start: main-start;
            grid-row-end: content-end;
            background: red;
        }
        
        .box3 {
            grid-column-start: content-start;
            grid-row-start: main-start;
            background: blue;
        }
        
        .box4 {
            grid-column-start: content-start;
            grid-column-end: main-end;
            grid-row-start: content-end;
            background: chocolate;
        }
    </style>

这些常用的，还有很多等等... 最后一张图概括网格布局的各种属性：