CSS Grid 网格布局详解
warning:
这篇文章距离上次修改已过192天，其中的内容可能已经有所变动。
CSS Grid 网格布局是一种强大的工具，可以用来创建复杂的布局而不需要使用多个嵌套的 HTML 元素。以下是一个简单的 CSS Grid 布局示例：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
gap: 10px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<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 class="grid-item">5</div>
</div>
</body>
</html>这个示例中，.grid-container 类定义了一个网格容器，它有三列和两行。grid-template-columns 和 grid-template-rows 属性分别定义了网格的列宽度和行高度。gap 属性定义了网格项之间的间隙。.grid-item 类定义了网格项的样式。这个布局创建了一个有着固定列宽和行高的 6 个方格的网格。
评论已关闭