Grid布局

基础概念

• grid容器

​ 即采用grid布局的父元素

• grid内容

  

  显示项目的区域，即虚线区域。内容区是可能超出grid容器的

• grid项目

  grid布局中每一个格子内部放置的元素

• 网格线

  网格布局中横向和纵向的线条

• 单元格

  即每一个小小的格子

• 间距

  网格与网格之间的距离被称为间距

grid容器属性

display:grid||inline-grid

触发网格,生成块状网格和行内块网格

grid-template-rows||grid-template-column:

• 纯数值 即每一个网格的宽度

    .grid-container {
          display: grid;
          width: 300px;
          height: 300px;
          border: 10px solid gray;
          box-sizing: border-box;
          /* 划分行列 */
          grid-template-rows: 100px 100px 100px;
          grid-template-columns: 100px 100px 100px;
        }
  

• 百分比取值。注意：这个百分比是相对于grid容器宽高的百分比！

   .grid-container {
          display: grid;
          width: 300px;
          height: 300px;
          border: 10px solid gray;
          box-sizing: border-box;
          /* 划分行列 */  
          grid-template-rows: 20% 30% 50%;  //60px 90px 150px  还是超出了grid容器
          grid-template-columns: 100px 100px 100px;
        }
  

• 重复函数 repeat(重复次数，重复的数值)

    .grid-container {
          display: grid;
          width: 300px;
          height: 300px;
          border: 10px solid gray;
          box-sizing: border-box;
          margin: 0 auto;
          transform: rotate(360deg);
          /* 划分行列 */
          grid-template-rows: repeat(3, 40px);
          grid-template-columns: repeat(3, 20px);
        }
  

  • grid-template-columns:repeat(auto-fill,30%)

    auto-fill会将列数宽度按照30%的宽度进行列划分，如果剩余空间不够，就不会再进行划分

• **auto 自动取值 ** 可用于三栏布局

        grid-template-rows: 300px;
        grid-template-columns: 100px auto 100px;
  

  设置第一列和第三列宽度为100px，第二列宽度自适应。从而实现一个三栏布局

• fr片段划分

  为了方便表示比例关系，网格布局通过fr表示片段，如果两列的宽度分别为1fr和2fr。表示后者的宽度是前者的两倍

       grid-template-rows: 1fr 2fr 3fr;
          grid-template-columns: 1fr 2fr 3fr;
  

  将行列划分为6个片段，每个网格分别占1个 2个 3个片段

• **minmax(min值，max值) **

  如果剩余空间足够最大值，那么网格的高度就是最大值200px。如果剩余空间大于min，小于max，那么它会自适应填充。

  如果剩余空间小于min，那么它会超出，超出部分还是min值

  ---

        grid-template-rows: 100px 100px minmax(100px, 200px);
        grid-template-columns: repeat(3, 1fr);

网格间距属性

• grid-row-gap：行间距
• grid-column-gap：列间距

​ 简化写法: grid-gap：行间距 列间距

调整项目顺序

**grid-auto-flow: row||column ** （横向显示，纵向显示）

项目位于网格中的对齐方式

添加完项目后，项目默认是撑开网格的，但是给项目添加了固定的宽度高度后，项目默认是在单元格左上角显示

属性	值	作用
justify-items	start||center||end||stretch	项目位于水平方向的开始位置(左上)		项目位于水平方向的中间位置		结束位置(右上)||默认的拉伸
align-items	start||center||end||stretch	垂直方向的开始位置(上)||中间位置||结束位置 (下)||即默认的拉伸
place-items	align-items justify-items	复合属性：垂直方向 水平方向

网格位于容器的对齐方式

默认网格位于容器的左上角位置显示

属性	值	作用
justify-content	start||center||end||space-around||space-between||space-evenly	网格位于容器水平方向的开始位置(左上)		中间位置		结束位置(右上)		行列间距环绕		行列两端对齐		行列间距平分(最外层有间距，所有间距是一样的宽度)
align-content	start||center||end||space-around||space-between||space-evenly	垂直方向的开始位置(上)||中间位置||结束位置 (下)||行列间距环绕||行列两端对其||行列间距平分
place-content	align-content justify-content

grid项目

如果想要给网格中添加项目，我们需要在容器中添加对应div。这些div被称为grid项目，注意：项目会默认自动撑开显示在网格内部（无需设置宽高）

合并单元格

• grid-column-start 纵向网格线开始占位
• grid-column-end纵向网格线结束占位
• grid-row-start 横向网格线开始占位
• grid-row-end 横向网格线开始占位