CSS-grid网格布局之跨越细胞

作者：Jasmine - 2020年08月31日

跨越细胞

使用可能更简单的语法，我们可以切换 grid-column-end 为span关键字。通过这种方式，span我们不必指定区域的结束位置，而是可以定义该项目应分布在多少轨道上：

.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

实现代码：

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			a{
				text-decoration: none;
			}
			body {
				margin: 30px;
				background: #f2f2f2;
			}
			ul{list-style: none;}
			
			.grid-1 {
			  display: grid;
			  grid-template-columns: repeat(3,150px);
			  grid-template-rows: repeat(3,100px);
			  grid-gap: 20px;
			}
			
			.grid-1 div {
			  color: white;
			  font-size: 20px;
			  padding: 20px;
			  }
			.item-1 {
			  background: #b03532;
			  
			  grid-row: 1 / span 2;    /* 横向从第一条开始，合并两块区域 */
			  grid-column: 1 / span 2;
			}
			.item-2 {
			  background: #33a8a5;
			}
			.item-3 {
			  background: #30997a;
			}
			.item-4 {
			  background: #6a478f;
			  
			  grid-row: 2 / span 2;
			  grid-column: 3;
			}
			.item-5 {
			  background: #da6f2b;
			}
			
		</style>
	</head>
	<body>
		<section class="grid-1">
		  <div class="item-1">1</div>
		  <div class="item-2">2</div>
		  <div class="item-3">3</div>
		  <div class="item-4">4</div>
		  <div class="item-5">5</div>
		</section>

		
	</body>
</html>

分析：

根据图展示的区域分布，第一块跟第四块内容比较特殊，都是跨越区域分布的，比如行或列跨越部分实现都用：

grid-row: 1 / span 2; grid-column: 1 / span 2; 行从第一条开始，结束不用写，直接写跨越2个区域用span 2。

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/685

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！