我尝试使用 CSS 网格重新创建此网格，仅使用表格和行跨度/列跨度以及单元格:nth-child，但我似乎无法弄清楚。我真的被这个问题困住了。我也尝试过使用 Flexbox，但仍然无法让它工作，有人可以提供帮助吗？网格如下:
.table {
margin: auto;
margin-top: 40px;
display: grid;
width: 50%;
grid-template-columns: 1fr 2fr 1fr;
grid-column-gap: 1px;
grid-row-gap: 1px;
}
.cell {
border: 1px solid;
border-color:#000;
margin: 10px;
height: 200px;
}
.cell img {
object-fit: cover;
width: 100%;
height: 200px;
}
.cell:nth-child(2){
grid-column: span 2;
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>CSS Grid 2</title>
<meta name="description" content="CSS Grid">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="cssgrid2.css">
</head>
<body>
<div class="table">
<div class="cell">
<img src="img/forest.jpg">
</div>
<div class="cell">
<img src="img/snow.jpg">
</div>
<div class="cell">
<img src="img/winter.jpg">
</div>
<div class="cell">
<img src="img/eclipse.jpg">
</div>
<div class="cell"></div>
<div class="cell">
<img src="img/moon.jpg">
</div>
<div class="cell">
<img src="img/trees.jpg">
</div>
</div>最佳答案
您可以尝试如下:
td {
border: 1px solid;
padding: 40px;
}<table>
<tr>
<td>
</td>
<td rowspan="2" colspan="2">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td style="width:100px">
</td>
<td rowspan="2">
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>关于html - CSS 网格娱乐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54451204/