HTML网格设计代码
时间: 2024-09-06 21:02:34 浏览: 23
HTML网格设计是一种创建网页布局的方式,它利用CSS Grid 或 Flexbox 等现代CSS技术将页面划分为一系列行(行)和列(列)。以下是基本的Grid布局代码示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 创建三等分的列 */
grid-template-rows: auto; /* 自动分配行高度 */
gap: 10px; /* 行列之间的间距 */
padding: 10px;
}
.grid-item {
background-color: #f1f1f1;
border: 1px solid black;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<!-- 添加更多网格项 -->
</div>
</body>
</html>
```
在这个例子中,`.container` 类设置了CSS Grid,`grid-template-columns` 定义了三列,`.grid-item` 代表每个格子,可以放置任意内容。要添加更多的网格项,只需在`.container` 内添加更多的`.grid-item` 标签。