CSS 网格布局：创建 4x4 网格页面
<!DOCTYPE html>
<html>
<head>
<title>CSS 网格布局：创建 4x4 网格页面</title>
<style>
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
margin: 20px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
font-size: 24px;
}
.grid-item a {
color: #fff;
text-decoration: none;
}
.grid-item a:hover {
color: #f00;
}
</style>
</head>
<body>
<div class='grid'>
<div class='grid-item'>
<a href='#'>格子1</a>
</div>
<div class='grid-item'>
<a href='#'>格子2</a>
</div>
<div class='grid-item'>
<a href='#'>格子3</a>
</div>
<div class='grid-item'>
<a href='#'>格子4</a>
</div>
<div class='grid-item'>
<a href='#'>格子5</a>
</div>
<div class='grid-item'>
<a href='#'>格子6</a>
</div>
<div class='grid-item'>
<a href='#'>格子7</a>
</div>
<div class='grid-item'>
<a href='#'>格子8</a>
</div>
<div class='grid-item'>
<a href='#'>格子9</a>
</div>
<div class='grid-item'>
<a href='#'>格子10</a>
</div>
<div class='grid-item'>
<a href='#'>格子11</a>
</div>
<div class='grid-item'>
<a href='#'>格子12</a>
</div>
<div class='grid-item'>
<a href='#'>格子13</a>
</div>
<div class='grid-item'>
<a href='#'>格子14</a>
</div>
<div class='grid-item'>
<a href='#'>格子15</a>
</div>
<div class='grid-item'>
<a href='#'>格子16</a>
</div>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/jYBh 著作权归作者所有。请勿转载和采集!