html css简单实现九宫格布局，自适应屏幕
HTML 和 CSS 代码实现九宫格布局，并且能够自适应屏幕大小的示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宫格布局</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列布局 */
grid-gap: 10px; /* 格子间隔 */
padding: 10px; /* 容器内边距 */
}
.grid-item {
background-color: #f0f0f0; /* 格子背景色 */
border: 1px solid #ccc; /* 格子边框 */
text-align: center; /* 文字居中 */
padding: 20px 0; /* 格子内边距 */
}
</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 class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>这段代码使用了CSS Grid布局来创建一个九宫格布局，其中.grid-container定义了一个三列的网格布局，.grid-item则表示每个网格的样式。这个布局能够适应不同的屏幕大小，网格项会自动填充可用空间。
评论已关闭