Grid布局

gird布局：

网格式布局：

• display:gird

  • 布局方法：gird-template-columns

    • 例子1：grid-template-columns: 1fr 1fr 1fr;

      • 平均分三列，每一列相同

    • 例子2：grid-template-columns: repeat(5, 100px 20px);

      • repeat(重复5次，第一个占据100像素，第二个占据20像素)

    • 例子3:grid-template-columns: repeat(auto-fill, 100px);

      • 自动填充100像素，直至放不下

    • 例子4: grid-template-columns: 1fr minmax(80px, 1fr);

      • 平均分成两份，第二份接收两个参数，分别为最小值和最大值，minmax(80px,1fr)表示列宽最小80px，最大1fr

    • 例子5：grid-template-columns:100px auto 100px

      • 分为三块，左右各一百像素，中间的自动补齐

  • 间距：

    • 行间距 row

      • ⭐ row-gap:；

      • grid-row-gap:;

    • 列间距 colum

      • ⭐ column-gap:;

      • grid-column-gap:;

    • 合并 gap

      • gap:行 列;

  • 排列方式 grid-duto-flow

    • 默认横线排列

      • :row

    • 竖向排列

      • column

  • 空间利用 grid-auto-flow:row dense;

    • row dense；

  • 单元格占据几行几列

    主要是根据每一条线

    例如：占据3行(因为三行四条线)

    grid-column-end:4

    • 行 grid-column-start:

    • 列 grid-column-end；

  • 容器属性一个区域由单个或者多个组成，可以实现与弹性布局order

    • grid-template-areas: ' a b c '

      ' d e f '

      ' g h i '

    • 以上是一个三行三列的布局(同时可以给子级设置justify-content:;等)

grid解析：

display:grid

• 列： grid-template-columns:1fr;

  • 1fr fraction:份数

  • 可以固定像素

• 行 grid-template-rows：50px

  • grid-auto-rows：100px；

    • 当你没有指定高度的时候，默认100px

    • grid-template-row优先级高于grid-auto-rows

  • repeat(auto-fill，minmax(150px,1fr));

• 间隙： gap

  • grid-auto-rows：100px;

  • gap:20px

• 使用线指定布局

  • grid-column-start：

    • 列从第几条线开始

  • grid-column-end：

    • 列到第几行结束

  • grid-row-start：

    • 行从第几条线开始

  • grid-row-end

    • 行到第几列结束

  • 简写：

    • grid-column：1/3;

    • grid-row：1/2;