CSS Grid 是一种用来创建灵活和强大的网格布局的技术。它可以让你更轻松地创建有趣的方格布局，而无需使用复杂的 HTML 或 CSS 代码。本文将向您展示如何使用 CSS Grid 制作有趣的方格布局，并提供示例代码。
CSS Grid 的基础知识
CSS Grid 是一种创建网格布局的新技术，它为前端开发人员提供了更多的布局自由度。它使用两个主要的 CSS 属性：grid-template-columns 和 grid-template-rows。这两个属性控制网格的列和行，可以用百分比、像素或其他单位定义它们的大小和数量。
CSS Grid 还为网格元素提供了对齐、空白和固定大小等功能。它允许您轻松地配置和调整网格布局，以创建复杂的、流动的网格。
创建简单的方格布局
我们首先从创建一个简单的方格布局开始。在这个例子中，我们将创建一个包含 4 个网格项目的网格。每个项目将占据一个等分的空间，以创建一个均匀分布的网格。
<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> </div>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 10px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
}在上面的代码中，我们首先定义了一个包含 4 个网格项目的网格容器。grid-template-columns 和 grid-template-rows 属性分别定义了网格的列和行。在这种情况下，我们使用 repeat 函数定义了两个等分的列和两个等分的行，以创造一个均匀的网格。
我们还为网格项目定义了一个包含背景颜色和内边距的样式类。为了让网格项目之间有一些填充，我们使用了 grid-gap 属性定义了两个网格项目之间的间距。
这个简单的方格布局非常适合显示均匀分布的内容，比如图像和文本。如果您想要制作更精细和有趣的方格布局，您可以使用 CSS Grid 的其他功能和技巧。
使用 CSS Grid 制作更有趣的方格布局
实际上，使用 CSS Grid 将创建有趣的方格布局变得容易。您可以使用它的网格间距、网格对齐和单元格大小等功能来控制您的布局。以下是一些例子：
调整单元格大小
您可以使用 grid-template-columns 和 grid-template-rows 属性手动定义每个单元格的大小。例如，您可以为每个单元格设置一个像素值，如下所示：
.grid-container {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px;
}在上面的代码中，我们手动定义了每个单元格的大小为 50 像素，以创建一个 3 列、2 行的网格。
使用网格间距
您可以使用 grid-gap 属性调整网格中单元格之间的间距。例如，下面的代码将在每个单元格之间添加 30 像素的填充：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 30px;
}使用网格对齐
您可以使用 justify-items 属性和 align-items 属性将网格中的单元格对齐到它们所在的行或列的开头、中部或结尾。例如，下面的代码将单元格水平对齐到网格行的中心：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
justify-items: center;
}具体实现
我们将实现一个稍微有些有趣的方格布局示例，如下所示：
<div class="grid-container"> <div class="logo"></div> <div class="image1"></div> <div class="image2"></div> <div class="text1"></div> <div class="text2"></div> <div class="footer"></div> </div>
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 200px 1fr 1fr;
grid-gap: 20px;
height: 600px;
}
.logo {
grid-column: 1 / 3;
background: url(logo.png) center center no-repeat;
background-size: contain;
}
.image1 {
grid-row: 2 / 4;
grid-column: 1 / 2;
background: url(image1.png) center center no-repeat;
background-size: cover;
}
.image2 {
grid-row: 3 / 4;
grid-column: 2 / 4;
background: url(image2.png) center center no-repeat;
background-size: cover;
}
.text1 {
grid-row: 2 / 3;
grid-column: 2 / 4;
background-color: lightblue;
padding: 20px;
}
.text2 {
grid-row: 4 / 5;
grid-column: 1 / 3;
background-color: lightblue;
padding: 20px;
}
.footer {
grid-row: 5 / 6;
grid-column: 1 / 4;
background-color: gray;
text-align: center;
padding: 20px;
}上面的代码实现了一个 3 列、3 行的网格布局。在这个布局中，我们使用不同大小和对齐方式的单元格来使它更有趣。
在这个布局中，我们使用了不同的 grid-column 和 grid-row 值来控制单元格的位置。我们还使用了 background 属性来添加图像和颜色到单元格中。
此外，我们还在底部添加了一个页脚单元格，它横跨整个网格，并使用 text-align 属性将文本居中。
总结
CSS Grid 是一种强大而灵活的网格布局技术。使用它，您可以创建复杂、自由度高的方格布局。在本文中，我们介绍了如何使用 CSS Grid 制作有趣的方格布局，并提供了示例代码。使用 CSS Grid 创建方格布局可以让您的网站更加个性化，吸引用户的注意力。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65904cd4eb4cecbf2d5bb705