CSS 网格布局：创建 4x4 网格链接 div 块
<!DOCTYPE html>
<html>
<head>
<title>CSS 网格布局：创建 4x4 网格链接 div 块</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: repeat(4, 100px);
grid-gap: 100px;
width: 450px;
margin: 0 auto;
background-color: #f2f2f2;
padding: 20px;
box-sizing: border-box;
}
<pre><code> .box {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 2px 2px 5px #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
text-align: center;
text-decoration: none;
color: #333;
}
.box:hover {
background-color: #ccc;
color: #fff;
}
</style>
</code></pre>
</head>
<body>
<div class='container'>
<a href='#' class='box'>Div 块1</a>
<a href='#' class='box'>Div 块2</a>
<a href='#' class='box'>Div 块3</a>
<a href='#' class='box'>Div 块4</a>
<a href='#' class='box'>Div 块5</a>
<a href='#' class='box'>Div 块6</a>
<a href='#' class='box'>Div 块7</a>
<a href='#' class='box'>Div 块8</a>
<a href='#' class='box'>Div 块9</a>
<a href='#' class='box'>Div 块10</a>
<a href='#' class='box'>Div 块11</a>
<a href='#' class='box'>Div 块12</a>
<a href='#' class='box'>Div 块13</a>
<a href='#' class='box'>Div 块14</a>
<a href='#' class='box'>Div 块15</a>
<a href='#' class='box'>Div 块16</a>
</div>
</body>
</html>
<p>推荐的颜色方案：#f2f2f2（背景色）、#333（字体颜色）、#fff（盒子背景色）、#ccc（边框颜色）</p>
原文地址: https://www.cveoy.top/t/topic/jYzt 著作权归作者所有。请勿转载和采集!