Grid 网格布局

Css网格可以定义由行和列组成的二维布局,然后将元素放置到网格中.有些元素可能只占据网格的一个单元,另一些元素则可能占据多行或多列.网格的大小既可以精确定义,也可以根据自身内容自动计算.你既可以将元素精确地放置到网络某个位置,也可以让其在网格内自动定位,填充划分好的区域

1.1 基础网格布局

.grid{
  display:grid; //将元素设为网格容器
  grid-template-columns:1fr 1fr 1fr; //定义等宽的三列
  grid-template-rows:1fr 1fr; //定义等高的两行
  grid-gap:0.5em; //给每个网格的单元格之间加上间隔
}

1.2 网格剖析

网格线(grid line):网格线构成了网格的框架.一条网格线可以水平或垂直,并且位于一行或一列的任何一侧.如果指定了grid-gap的话,它就位于网格线上.
网格轨道(grid track):一个网格轨道是两条相邻网格线之间的空间.网格有水平轨道(行)和垂直轨道(列).
网格单元(grid cell):网格上的单个空间,水平和垂直的网格轨道交叉重叠的部分.
网格区域(grid area):网格上的矩形区域,由一个到多个网格单元组成.该位置位于两条垂直网格线和两条水平线之间. 示例:grid示例1

1.3 配合Flexbox布局使用

两种布局的区别

Flexbox本质上是一维的,而网格是二维的.
Flexbox是以内容为切入点由内向外工作的,而网格是以布局为切入点从外向内工作的

2 替代语法

网格布局元素还有另外两种替代语法:命名的网格线和命名的网格区域

2.1 命名的网格线

声明网格轨道时,可以在中括号内写上网格线的名称

grid-template-columns: [start] 2fr [center] 2fr [end];

这条声明定义了两列的网格,三条垂直的网格线分别叫做 start,center 和 end.之后定义网格元素在网格中的位置时,可以不用编号而是用这些名称来声明,如下列代码所示.

grid-column:start / center;

2.2 命名的网格区域

不用计算或者命名网格线,直接用命名的网格区域将元素定位到网格中.实现这一方法需要借助网格容器的grid-tempalte-areas 属性和网格元素的grid-area属性

.container{
  display:grid;
  grid-template-areas: "title title" "nav nav" "main aside1" "main aside2"; //将每个网格单元分配到一个命名的网格区域中
  grid-template-columns:2fr 1fr;
  grid-template-rows:repeat(4 , auto);
  grid-gap:1.5em;
  max-width:1080px;
  margin:0 auto;               
}


header{
  grid-area:title;
}

nav{
 grid-area:nav;
}

.main { 
 grid-area: main; 
} 
.sidebar-top { 
 grid-area: aside1; 
} 
.sidebar-bottom { 
 grid-area: aside2;
}

3 显式和隐式网格

在某些场景下,可能不清楚该把元素放在网格的哪个位置上.当处理大量的网格元素时,挨个指定元素的位置未免太不方便.当元素是中数据库获取时,元素的个数可能是未知的.在这些情况下,以一种宽松的方式定义网格可能更合理,剩下的交给布局算法来放置网格元素. 这时候就需要用到隐式网格(implicit grid).使用grid-template-* 属性定义网格轨道时,创建的是显性网格(explicit grid),但是有些网格元素仍然可以放在显式轨道外面,此时会自动创建隐式轨道以扩展网格,从而包含这些元素. 图 6-11 里的网格只在每个方向上指定了一个网格轨道。当把网格元素放在第二个轨道（2 号和 3 号网格线之间）时，就会自动创建轨道来包含该元素。 xmxhxx.cn

示例:使用显示跟隐式布局的照片墙功能

最后修改于 2023-03-07