Grid网格布局

CSS Grid(网格) 布局

CSS Grid 网格布局可以将网格元素放置在与这些行和列相关的位置上，进而快速、便捷的对页面结构进行布局，提高工作效率

“flexbox” 是一维的布局，是因为一个 “flexbox container” 一次只能处理一个维度上的元素布局，一行或者一列。

相比较 “Grid网格布局”，则是二维布局可以同时处理行和列上的布局

通常适用于布局页面主要的区域布局或小型组件

 

兼容

ie10、ie11支持带前缀-ms-

 

基本概念

容器与项目

采用网格布局的区域，称为"容器"（container）。 容器内部采用网格定位的子元素，称为"项目"（item）。

 

行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

 

单元格

行和列的交叉区域，称为"单元格"（cell）

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

 

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

网格线

划分网格的线，称为"网格线"（grid line）。 水平网格线划分出行，垂直网格线划分出列。

 

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，
比如三行就有四根水平网格线。

网格属性

Grid 布局的属性分成两类。 一类定义在容器上面，称为容器属性； 另一类定义在项目上面，称为项目属性。

容器属性

设置为网格布局

• 设置为块级网格

div {
  display: grid;
}

• 设置为行级网格

div {
  display: inline-grid;
}

注意

• 不是网格的直接子元素，不参与网格布局

• 设为网格布局以后，容器子元素（项目）的float、display: inline-block、vertical-align和column-*等设置都将失效。

列宽与行高

grid-template-columns网格布局中列的数量（和宽度）

grid-template-rows网格布局中行的数量（和高度）

语法

• 空格隔开的一组值列表

• 其中每个值指定相应列的宽度/行的高度。

取值

• 默认值 none

• 绝对单位px

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

• 百分比

  .container {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 33.33% 33.33% 33.33%;
  }

• fr 关键字

  fraction 的缩写,意为部分

  • 弹性系数，按比例分配剩余空间（如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍）

  • 可以与绝对长度的单位结合使用

• auto 关键字

  关键字表示由浏览器自己决定长度

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

• minmax()

  • 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值

    即空间不足时以最小以min显示，空间有剩余时最大按max显示

    • 注意：如果max值小于min值，则该值会被视为min值。最大值可以设置为fr但最小值则不行

    grid-template-columns: 1fr 1fr minmax(100px, 1fr);
    minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

• repeat( )函数

  • 作用：简化重复的值

  • 接受两个参数，第一个参数是重复的次数,第二个参数是所要重复的值

    repeat(重复的次数，一个或空格隔开的多个值 )
    
    grid-template-columns: repeat(2, 100px);表示共两列，每列各100px

  • 第二个参数为空格隔开的多个值 时表示，重复某种模式。

  grid-template-columns: repeat(2, 100px 20px 80px);
  定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。

• auto-fill 关键字

  【单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格时使用】

   grid-template-columns:repeat(auto-fill,100px);
   表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。

设置行与行的间隔（行间距）

column-gap属性设置列与列的间隔（列间距）

row-gap属性设置行与行的间隔（行间距）

取值

• 默认值 0

• px

• 百分比（相对于容器）

简写grid-gap

• gap: 行间距 列间距; 【空格】隔开

• 省略了第二个值，浏览器认为第二个值等于第一个值

单元格在容器垂直位置,水平位置

justify-content水平位置 总网格区域相对于容器左右对齐方式(网格内容大小小于容器宽时) align-content 位置 总网格区域相对于容器上下对齐方式(网格内容大小小于容器高时)

 

取值

• start - 对齐容器的起始边框。

• end - 对齐容器的结束边框。

• center - 容器内部居中。

• stret ch - 列宽或行高为auto时有效

• space-around - 单元格两侧间隔相等。所以，单元格之间的间隔比单元格与容器边框的间隔大一倍。

• space-between - 剩余空间分布在单元格之间，单元格与容器边框之间没有间隔。

• space-evenly - 剩余空间均等分布在单元格与单元格，单元格与项目之间。单元格与容器边框之间间隔相等

简写

place-content属性是align-content属性和justify-content属性的合并简写形式。

• place-content:垂直 水平 【空格】隔开

• 如果省略第二个值，浏览器就会假定第二个值等于第一个值。

项目（内容）在单元格中的垂直、水平位置

justify-self 水平位置:内容相对于单元格左右对齐方式(通常项目内容大小小于单元格宽度时)

align-self 垂直位置:内容相对于单元格上下对齐方式(通常项目内容大小小于单元格高度时)

取值

• start：对齐单元格的起始边缘。

• end：对齐单元格的结束边缘。

• center：单元格内部居中。

• stretch：拉伸，占满单元格的整个宽度（默认值）

• 

   

简写

place-self属性是align-self属性和justify-self属性的合并简写形式。

• place-self: 垂直 水平; 【空格隔开】

• 如果省略第二个值，则浏览器认为与第一个值相等。

项目放置顺序

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行

grid-auto-flow 属性

• 默认值是row，即"先行后列"。

• column，变成"先列后行"。

• 使用之前grid-template-columns和grid-template-rows必须都设置

网格项命名（给网格划分区域）

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成

通过grid-template-areas 属性实现

取值

• 默认值 none

• 一个双引号一行，一个空格一列

  grid-template-areas: 
                       "种花 养鱼 菠菜"
                       "西瓜 冬瓜 南瓜";

• 多个单元格合并成一个区域的写法

  

  grid-template-areas: 'a a a'
                       'b c c'
                       'd d d';

• 某些区域不需要利用，则使用"点"（.）表示。

  .wrap {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  grid-template-areas: "a a a"
  					 "b . c"
  					 "d d d";
  
  margin:20px auto;
  }
  
  .header{
      background-color: orange;
      grid-area:a;
  }
  .side{
      background-color: yellowgreen;
      grid-area:b;
  }
  .main{
      background-color: #ccc;
      grid-area:c;
  }
  .footer{
      background-color: pink;
      grid-area:d;
  }
        
        

   <div class="wrap">
          <div class="header">header</div>
          <div class="main">main</div>
          <div class="side">side</div>
          <div class="footer">footer</div>
   </div>
  
         

   

项目属性

grid-area指定项目具体显示区域

可以通过网格区域名指定，也可以通过指定四条组成网格区域的网格线确定。

取值：

• none 默认值。 没有命名的网格区域

• 网格区域名（指定使用grid-template-areas属性自定义一些网格区域）

• 通过指定grid子项所占据的区域的起始和终止位置

  • grid-column-start属性：左边框所在的垂直网格线

  • grid-column-end属性：右边框所在的垂直网格线

  • grid-row-start属性：上边框所在的水平网格线

  • grid-row-end属性：下边框所在的水平网格线

  简写

  • grid-column属性是grid-column-start和grid-column-end的合并简写形式

  • grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

    • 以斜杠分割 开始/结束

    • 斜杠以及后面的部分可以省略，默认跨越一个网格。

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

注：如果项目指定的网格区域是重叠的可以使用z-index 进行调整层级

单独指定单元素格内容的对齐

justify-self属性设置单元格内容的水平位置（左中右）

align-self属性设置单元格内容的垂直位置（上中下）

• start：对齐单元格的起始边缘。

• end：对齐单元格的结束边缘。

• center：单元格内部居中。

• stretch：拉伸，占满单元格的整个宽度（默认值）  

简写

• place-self属性是align-self属性和justify-self属性的合并简写形式。

• 如果省略第二个值，place-self属性会认为这两个值相等