Grid 全面学习

achens
220 阅读6分钟

【导言】栅格布局是什么？

网格布局（Grid）是目前最强大的 CSS 布局方案。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

1. 基本概念

1. Grid 容器 & Grid 子项

Grid 容器即设置了网格布局的元素，Grid 容器的直接子元素为 Grid 子项。

.grid{
  /* 通过设置 display 为 grid 和 inline-grid 开启 Grid 布局 */
	display: grid | inline-grid; 
}

**Tips：*设为网格布局以后，容器子项上的 float、display: inline-block、display: table-cell、vertical-align 和 column- 等设置都将失效。

2. 行(row) & 列(column)

Grid 容器里面的水平区域称为行，垂直区域称为列。

3. 单元格(cell) & 网格线(line)

  1. 行和列的交叉区域，称为单元格。
  2. 划分网格的线，称为网格线。

2. Grid 网格布局属性

1. 设置网格内容区域

  • grid-template-columns: 设置容器内子项列数及宽度。
  • grid-template-rows: 设置容器内内容行数及行高。
  • grid-template-areas: 通过子项的名称设置网格布局，每行以单引号分隔。
    • grid-area：设置每个子项的名称。
.grid{
  /* 将容器设为三列，每列的列宽为 100px */	
  grid-template-columns: 100px 100px 100px;
  /* 将容器设为三行，每列的行高为 100px，超出后循环设置 */
  grid-template-rows: 100px 100px 100px; 
  /* 上面属性可以简写为 */
  grid-template-areas: 'a a a'
                       'b b b'
                       'c c c';
}

2. 设置网格间隙

  • grid-row-gap: 设置行与行的间隔。
  • grid-column-gap: 设置列与列的间隔。
  • gap: 列间隙与行间隙的合并简写形。
.grid{
  grid-row-gap: 50px;
  grid-column-gap: 50px;
  gap: 50px;
}

**Tips：**grid-gap 已被淘汰...至少我的 VScode 中输入没有任何反应。且显示一条删除线。

3. 设置子项在容器中的主轴排列方式

  • justify-content：子项在容器中的水平排列方式。
  • align-content：子项在容器中的垂直排列方式。
  • place-content：属性是 align-content 属性和 justify-content 属性的合并简写形式。
.grid{
	justify-content: start | end | center | space-around | space-between | space-evenly;
  align-content: start | end | center | space-around | space-between | space-evenly;
  place-content: start | end | center | space-around | space-between | space-evenly;
}

4. 设置子项在容器中相对于自身的排列方式

MDN详解：developer.mozilla.org/zh-CN/docs/…

  • justify-items: 设置子项自身的水平位置。
  • align-items: 设置子项自身的垂直位置。
  • place-items: align-items 与 justify-items 的合并简写属性。
.grid .items{   
  justify-items: start | end | center | space-around | space-between | space-evenly;  
  align-items: start | end | center | space-around | space-between | space-evenly;
  justify-items: start | end | center | space-around | space-between | space-evenly;
}

5. repeat()、minmax() 函数和 auto-fill、fr 关键字

  • repeat(count, value): 简化重复的值。
  • minmax(min, max) : 规定长度范围。
  • auto-fill: 自动填充。
  • fr: 设置比例关系。
.grid{
  /* 3列， 每列 100px */
  grid-template-columns: repeat(3, 100px); 
  /* 自适应列数， 每列 100px */ 	
  grid-template-columns: repeat(auto-fill, 100px); 
  /* 3列，每列等宽 */
  grid-template-columns: repeat(3, 1fr); 
  /* 第一列 100px，剩余空间以 1 : 2 的比例分配给第二第三列 */
  grid-template-columns: 100px 1fr 2fr; 
  /* 前两列 1 等宽 ，最后一列最小 200px */
  /* 正常情况下是前一列的 2 倍 */
  grid-template-columns: 1fr 1fr minmax(200px, 2fr); 
}

3. 子项目属性

设置在Grid 子项的属性,主要针对子项的位置及其内容位置的设置。

1. 设置子项在网格的位置

  • grid-column-start：设置子项在第几列开始。
  • grid-column-end：设置子项的在第几列结束。
  • grid-column：grid-column-start 和 grid-column-end 的合并简写形式。
.grid .items{
  /* grid-column-start: 开始列; */
  grid-column-start: 1;
  
  /* grid-column-end: 结束列; */
  grid-column-end: 2;
  
  /* 也可以结合网格线和 span 关键字使用。 */
  /* grid-column: 开始位置 / 结束位置; */
  grid-column: 1 / 2;
}
  • grid-row-start：设置子项在第几行开始。
  • grid-row-end：设置子项的在第几行结束。
  • grid-row：grid-row-start 属性和 grid-row-end 的合并简写形式。
.grid .items{
  /* grid-row-start: 开始行; */
  grid-row-start: 1; 
  
  /* grid-row-end: 结束行; */
  grid-row-end: 2; 
  
  /* 也可以结合网格线和 span 关键字。 */
  /* grid-row: 开始行 / 结束行; */
  grid-row: 1 / 2; 
}
  • grid-area：grid-column 和 grid-row 的合并简写形式。
.grid .items{
  /* grid-area: 开始行 / 结束行 / 结束行 / 结束列; */
  grid-area: 2 / 1 / span 2 / span 3;
  /* grid-area 也用于对子项的命名 */
  grid-area: a1;
}

2. 设置子项中内容的位置

  • justify-self：设置子项内容的水平排列位置。
  • align-self：设置子项内容的水平排列位置。
  • place-self：justify-self 和 place-self 的结合。

与容器属性 justify-items，align-items，place-items 作用一致。

.grid .self{
  /* 指定单元格内容的水平排列方向 */
  justify-self: start | end | center | stretch;
  /* 指定单元格内容的垂直排列方向 */
  align-self: start | end | center | stretch;
  /* justify-self 与 align-self 属性的合并 */
  place-self: start | end | center | stretch;
}

3. 设置子项横跨几行

W3C详解：www.runoob.com/try/try.php…

  • grid-row：设置水平方向横跨几行。
  • grid-column：设置垂直方向横跨几行。
.grid .items{
  // 设置该子项水平方向横跨两行
	grid-row: span 2;
  // 设置该子项垂直方向横跨四行
  grid-columns: span 4;
}

4. Grid 的布局实例

1. 两栏布局

1. HTML

<header>我是头部</header>
<main>
  <div class="left">我是左边</div>
  <div class="right">我是右边</div>
</main>
<footer>我是尾部</footer>

2. CSS

header {
  width: 100%;
  line-height: 60px;
  background-color: burlywood;
}
main {
  width: 100%;
  line-height: 600px;
  display: grid;
  grid-template-columns: 200px auto;
}
main .left {
  background-color: coral;
}
main .right {
  background-color: chartreuse;
}
footer {
  width: 100%;
  line-height: 60px;
  background-color: brown;
}

3. 呈现效果

image.png

2. 三栏布局（圣杯布局）

1. HTML

	<header>我是头部</header>
	<main>
	  <div class="left">我是左边</div>
	  <div class="middle">我是中间</div>
	  <div class="right">我是右边</div>
	</main>
	<footer>我是尾部</footer>

2. CSS

header {
  width: 100%;
  line-height: 60px;
  background-color: coral;
}
main {
  width: 100%;
  line-height: 600px;
  display: grid;
  grid-template-columns: 200px auto 200px;
}
main .left {
  background-color: cornflowerblue;
}
main .middle {
  background-color: cornsilk;
}
main .right {
  background-color: crimson;
}
footer {
  width: 100%;
  line-height: 60px;
  background-color: cyan;
}

3. 呈现效果

image.png

3. 特殊布局

1. HTML

<div class="grid">
  <div class="items item1"><span>1</span></div>
  <div class="items item2"><span>2</span></div>
  <div class="items item3"><span>3</span></div>
  <div class="items item4"><span>4</span></div>
  <div class="items item5"><span>5</span></div>
  <div class="items item6"><span>6</span></div>
  <div class="items item7"><span>7</span></div>
</div>

2. CSS

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 2fr 1fr 1fr;
  font-size: 50px;
}
.grid .items {
  background-color: orange;
  min-height: 100px;
}
.item1 {
  grid-column: span 2;
}
.item2 {
  grid-column: span 4;
}
.item3,
.item4 {
  grid-row: span 2;
}
.item5 {
  grid-column: span 2;
  grid-row: span 2;
}
.item6, .item7 {
  grid-column: span 2;
}
/* 设置文本垂直居中 */
span {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

3. 呈现效果：

image.png

原文地址：www.yuque.com/docs/share/…

avatar
文章
阅读
粉丝