写一个有2行10列的前端页面
时间: 2024-05-28 15:13:00 浏览: 7
<!DOCTYPE html>
<html>
<head>
<title>2x10 Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-auto-rows: 50px;
grid-gap: 10px;
background-color: #f5f5f5;
padding: 10px;
}
.grid-item {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
font-size: 18px;
}
</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 class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
<div class="grid-item">17</div>
<div class="grid-item">18</div>
<div class="grid-item">19</div>
<div class="grid-item">20</div>
</div>
</body>
</html>
注:本页面使用 Grid 布局实现,其中 grid-template-columns 指定了列数,grid-auto-rows 指定了行高,grid-gap 指定了格子之间的间距。