以下是一个简单的Grid布局示例:
html:
1
2
3
4
5
6
在上面的代码中,我们首先定义了一个容器 .container,接着设置 display: grid; 将其布局方式设置为 Grid。
然后,我们通过 grid-template-columns 定义了网格列数以及每列的宽度,并通过 grid-gap 设置了网格之间的距离。
最后,我们定义了每个网格元素的样式和位置,通过 grid-row 和 grid-column 来设置行列跨度。
这样,我们就可以使用 Grid 布局来构建复杂的页面布局。