Grid布局

Tue, 08 Oct 2024 00:00:00 +0800

Grid 布局是什么？

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址

Grid 布局和 flex 布局

讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

Grid 布局远比 flex 布局强大！

flex布局示例:

Grid 布局示例：

Grid 的一些基础概念

我们使用 Grid 实现一个小例子，演示 Grid 的一些基础概念，演示地址

<div class="wrapper">
 <div class="one item">One</div>
 <div class="two item">Two</div>
 <div class="three item">Three</div>
 <div class="four item">Four</div>
 <div class="five item">Five</div>
 <div class="six item">Six</div>
</div>

.wrapper {
 margin: 60px;
 /* 声明一个容器 */
 display: grid;
 /* 声明列的宽度 */
 grid-template-columns: repeat(3, 200px);
 /* 声明行间距和列间距 */
 grid-gap: 20px;
 /* 声明行的高度 */
 grid-template-rows: 100px 200px;
}
.one {
 background: #19CAAD;
}
.two {
 background: #8CC7B5;
}
.three {
 background: #D1BA74;
}
.four {
 background: #BEE7E9;
}
.five {
 background: #E6CEAC;
}
.six {
 background: #ECAD9E;
}
.item {
 text-align: center;
 font-size: 200%;
 color: #fff;
}

Grid布局 on Last Stand

Grid布局

Grid 布局是什么？

Grid 布局和 flex 布局

Grid 的一些基础概念