【前端】CSS3 Grid网格布局基础

一、产生

（一）布局方式演进

1. table

劣势
表格中内容加载延时问题

2. hack ( float–>position–>inline )

劣势

• 响应式布局错位
• 竖直方向居中问题

3. FlexBox ( 弹性盒模型 ）

一维布局，只能在一条直线上放置内容区块。

4. Grid

二维布局，根据设计需求将内容区块放置的任何地方。

优势

• 固定或弹性轨道尺寸
• 定位项目
• 创建额外轨道保存内容
• 对齐控制
• 控制重叠内容（z-index）

兼容性

• Grid与Flex配合使用

二、基础

（一）基本概念

• Grid Container（网格容器）:应用display:grid;的div，所有网格项的父元素。
• Grid Item （网格项）:网格容器中每一个子元素。
• Grid Line （网格线）:组成网格项的分界线。
• Grid Track （网格轨道）:相邻网格线之间为网格轨道。
• Grid Cell （网格单元）:相邻列网格线与行网格线组成的区域。
• Grid Area （网格区域）:四个网格线包围的区域
• fr（单位）:剩余空间分配数。
• gr（单位） :网格数。

（二）网格的属性

display

• 作用：将元素定义为grid container，并为其内容建立新的网格格式化下文（grid formatting context）。
• 属性值：

  display : grid | inline-grid | subgrid
  /**
    *	grid	:	块级网格
    * inline-grid	:	行内网格
    *	subgrid	:	对于嵌套网格，继承父网格容器的行、列大小
    **/
  

  设置为网格布局后，column、float、clear、vertical-align属性无效。
• 实例：

  <style>
  .container{
      display: grid;
  }
  </style>
  
  <div class="container">
      <div class="item">A</div>
      <div class="item">B</div>
      <div class="item">C</div>
      <div class="item">D</div>
  </div>
  

grid-template

```grid-template-columns / grid-template-rows / grid-template-areas```

• 作用：规定行和列数目。
• 属性值：

  grid-template-columns	:	[grid-line-name] <track-size>;
  /**
    *	<track-size>
    *	单位为px、em、fr、%
    * 属性值为auto时，若container长度度确定则自动分配，不确定则为零或子元素大小。
   **/
  /**
    *	[grid-line-name]
    *	网格线名称，用于描述网格区域，一条线可以有多个名字
   **/
  

• 实例

  .container{
      display: grid;
      grid-template-columns: [col1-s] 40px [col1-e col2-s] 50px [col3-s] auto [col4-s] 50px [col5-s] 40px;
      grid-template-rows:auto;
  }
  

grid-template-areas

• 作用：指定网格区域名称定义网络模板。
• 属性值：

  grid-template-areas	:	"<grid-area-name> . none";
  

• 实例

  .container{
      grid-template-areas	:	"heade header header header"
      		"main main . siderbar"
      		"footer footer footer footer";
  }
  /* 每一个名称对应一个网格单元	*/
  

• grid-template合写

  .container{
      grid-template-areas	:	
      	[row1-s] "header header header" 25px [row1-e]
      	[row2-s] "footer footer footer" 25px [row2-e]
      	/auto 50px auto;
  	}
  /* 每一个名称对应一个网格单元	*/
  

gap

• 作用：指定网格线宽度（网格单元间隙）。
• 属性值：

  /*列*/
  grid-column-gap	:	<gap>;
  /*行*/
  grid-row-gap	:	<gap>;
  /**	不能指定特定网格线gap！	**/
  
  /*	简写形式	*/
  grip-gap	:	<grid-row-gap> <grid-column-gap>;
  /*	目前已简化为gap	*/
  

items

• 作用：
  justify-items : 沿着行轴对齐网格内的内容。
  align-items : 沿着行轴对齐网格内的内容。
• 属性值：

  justify-items	:	start|end|center|stretch;
  align-items	:	start|end|center|stretch;
  /**
    *	start	左/上对齐
    *	end	右/下对齐
    *	center	中间位置
    *	stretch	内容宽度占整个网格区域空间（默认值）
   **/
  /*简写*/
  place-items	:	<align-items> <justify-items>;
  

content

• 作用：
  justify-content : 沿着行轴对齐容器内网格。
  align-content : 沿着行轴对齐容器内网格。
  place-content : 简写形式
• 属性值：

  justify-content	:	start|end|center|stretch|space-between|space-around|space-evenly;
  align-content	:	start|end|center|stretch|space-between|space-around|space-evenly;
  /**
    *	start	左/上对齐
    *	end	右/下对齐
    *	center	中间位置
    *	stretch	内容宽度占整个网格区域空间（默认值）
    *	space-between	
    *	space-around
    *	space-evenly
   **/
  /*简写*/
  place-content	:	<align-content> <justify-content>;
  

grid-auto

• 作用：
  grid-auto-columns/grid-auto-columns : 指定自动生成（隐式）网格轨道大小。
  grid-auto-row / grid-auto-column / grid-auto-dense : 指定自动布局算法。

grid

• 作用：属性简写。

三、相关CSS函数

repeat( )

• 作用
  跟踪列表重复片段，大量显示重复模式的列或行。
  只能用于grid-template-columns / grid-template-rows
• 参数

  repeat( <repeat>, <values>)
  /**
    *	<repeat>	重复次数
    *	<values>	重复内容
    *		max-content	自适应最大网格大小
    *		min-content
    *		auto
   **/
  

• 实例

  .container{
      grid-template-columns	:	repeat( 5 , 1fr)
      /**等价于**/
      grid-template-columns	:	1fr 1fr 1fr 1fr 1fr;
  }
  

fit-content( )

• 作用
  内容适配。
  只能用于grid-template-columns / grid-template-rows
• 参数

  fit-content(<length>)
  /**
    *	length	内容最大长度
   **/
  

minmax( )

• 作用
  指定网格宽度区间。
• 参数

  minmax(<min-length>,<max-length>)
  /**
    *	length	
   **/
  

• 实例

  .container{
      grid-template-columns	:	repeat( auto-fill , minmax(100px,150px));
      /**根据minmax自动填充**/
  }
  

四、网格项布局

start/end

• 作用：使用特定网格线确定grid item在网格中的位置。
• 属性值

  .item{
      grid-column-start	：<number> | <grid-line-name> | span <number> |span <name>;
      /** grid-column-end grid-row-start grid-row-end与之类似 **/
      /** 简写 **/
      grid-column	：<start-line> / <end-line>;
      grid-row	：<start-line> / <end-line>;
  }
  

grid-area

• 作用：使用特定网格线确定grid area在网格中的位置。
• 属性值

  .item{
      grid-area	：<name> | <row-start> / <column-start> / <row-end> / <column-end>;
  }
  

self

• 作用：
  justify-self ： 沿着行轴方向对齐grid item内容。
  align-self ： 沿着列轴方向对齐grid item内容。
• 属性值

  .item{
      justify-self	：start|end|center|stretch;
      align-self	：start|end|center|stretch;
  }
  

Version

{
	"Version"	:	"0.1",
	"Date"	:	"2019/09/27"
}