css3之Grid布局

前端css3布局，二维布局，目前前端最常使用的布局，是前端开发者必会的布局，本图是全网最全的知识结构框架，初学者必记的知识点，值得看看。

Grid布局

• 基本用法
  • 1.设置父元素Grid布局
    • display：Grid；
    • display:inline-grid;
  • 2.设置父元素相关属性
• Grid布局的属性及用法
  • 1.布置行和列(布置在父容器上面的)
    • 行
      • grid-template-columns:100px 100px 100px;
        • 把一行分为三个部分
      • grid-template-columns: repeat(3,100px);
        • 把一行分为三个部分
        • repeat（数量，大小），该函数为重复函数
      • grid-template-columns:1fr 1fr 2fr;
        • 分为三个部分，1:1:2
        • fr关键词用于均匀分配，按照比例关系分配
      • grid-template-columns:repeat(auto-fill,100px);
        • 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素
        • auto-fill关键词：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格
      • grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
        • minmax（最小，最大），
        • 分配空间时根据空间的大小来塞
      • grid-template-columns:1fr 1fr minmax(300px,2fr);
        • 第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。
      • grid-template-columns:100px auto 100px;
        • auto关键字是用于自适应布局的，占用剩下的空间进行布局
    • 列
      • grid-template-rows
        • 其他属性与行一致，这边就不重复了
  • 2.行列之间的间隔（布置在父元素上）
    • 行
      • grid-column-gap:100px;
    • 列
      • grid-row-gap:10px;
    • 综合属性
      • grid-gap：10px,100px;
        • 第一个值为列，第二个为行
  • 3.定义划分区域名字和放置位置（布置在父元素上）
    • grid-template-area:"a . c";
      • 定义了一行，a区域和空白区域和c区域
  • 4.定义位置排列(布置在父元素上)
    • 先行
      • grid-auto-flow:row;
        • 自动排列方式为行排列，先排满一行，然后在换行，默认是row
    • 先列
      • grid-auto-flow:columns;
        • 自动排列方式为列排列，先排满一列，在换列
    • 特殊的
      • grid-auto-flow:row danse;
        • 无视排列顺序，尽可能填满表格
        • danse关键字
  • 5.布局
    • 1.设置单元格内容(也是定义在父元素上的，是对所有划分区域进行定义)
      • justify-items属性是（水平）前中后布局
        • 具体属性
          • justify-items：start；
            • 靠右
          • justify-items: end:
            • 靠左
          • justify-items: center;
            • 中间
          • justify-items: stretch;
            • 有空就填满
      • align-items属性是（垂直）上中下布局
        • 具体属性
          • 同上，也是start,end,center,stretch
    • 2.content 属性是整个内容区域在容器里面的位置
      • justify-content:
        • start
          • 开始
        • end
          • 末尾
        • center
          • 居中
        • stretch
          • 项目大小没有指定时，占据所有空白
        • space-around
          • 每个项目两侧的间隔相等
        • space-evenly
          • 项目与项目的间隔相等，项目与容器边框之间有间隔
        • space-between
          • 项目与项目的间隔相等，项目与容器边框之间没有间隔
      • align-content:
        • 同上
      • 合并
        • place-content
          • 属性同上，第一个值表示水平，第二个值表示竖直
  • 6.隐式布局的介绍，显式网格包含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列，如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列假如有多余的网格（也就是上面提到的隐式网格），那么它的行高和列宽可以根据 grid-auto-columns 属性和 grid-auto-rows 属性设置。它们的写法和grid-template-columns 和 grid-template-rows 完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高
    • grid-auto-columns
    • grid-auto-rows
  • 7.细节调整单体项目的位置
    • grid-column-start：1；
      • 左边框所在的垂直网格线
    • grid-column-end：3；
      • 右边框所在的垂直网格线
    • grid-row-start：1；
      • 上边框所在的水平网格线
    • grid-row-end：2；
      • 下边框所在的水平网格线
  • 8.单个项目内容的调整
    • justify-self
      • 调整水平位置
    • align-self
      • 调整竖直
    • pasce-self
      • 结合上面