【发布时间】：2022-01-25 13:19:03
【问题描述】：
编辑 请记住，每个单元格可以有不同的宽度和高度。这和这个帖子不是一回事：CSS-only masonry layout，请看参考图的指引：
大约有 19 列和 17 行由放置在虚拟 5×5 基本网格中的引导线和图块在两个轴上重叠。
我想要介于网格和弹性布局之间的东西。网格受单元格大小的限制，而 flex 更强大，但（据我所知）仅限于方向。我想要不同的单元格大小，每个 5 个单元格的总和为相同的宽度，5 个列的总和为相同的高度。如下图。
有没有办法使用 CSS 实现类似的布局？
这是我到现在为止的全部内容：
HTML：
<div class="calendar">
<div class="day day1">1</div>
<div class="day day2">2</div>
<div class="day day3">3</div>
<div class="day day4">4</div>
<div class="day day5">5</div>
<div class="day day6">6</div>
<div class="day day7">7</div>
<div class="day day8">8</div>
<div class="day day9">9</div>
<div class="day day10">10</div>
<div class="day day11">11</div>
<div class="day day12">12</div>
<div class="day day13">13</div>
<div class="day day14">14</div>
<div class="day day15">15</div>
<div class="day day16">16</div>
<div class="day day17">17</div>
<div class="day day18">18</div>
<div class="day day19">19</div>
<div class="day day20">20</div>
<div class="day day21">21</div>
<div class="day day22">22</div>
<div class="day day23">23</div>
<div class="day day24">24</div>
<div class="day day25">25</div>
</div>
CSS：
.day {
margin: 10px;
color: white;
}
.calendar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
width: 586px;
height: 586px;
border: solid 1px;
}
.day1 {
width: 87px;
height: 97px;
background: lightblue;
}
.day2 {
width: 151px;
height: 86px;
background: orange;
}
.day3 {
width: 86px;
height: 86px;
background: lightcoral;
}
.day4 {
width: 76px;
height: 118px;
background: lightgray;
}
.day5 {
width: 86px;
height: 86px;
background: lightblue;
}
.day6 {
width: 87px;
height: 86px;
background: lightsteelblue;
}
.day7 {
width: 108px;
height: 97px;
background: lightblue;
}
.day8 {
width: 129px;
height: 97px;
background: lightsteelblue;
}
.day9 {
width: 76px;
height: 65px;
background: orange;
}
.day10 {
width: 86px;
height: 128px;
background: cyan;
}
.day11 {
width: 75px;
height: 75px;
background: lightcoral;
}
.day12 {
width: 99px;
height: 96px;
background: lightgray;
}
.day13 {
width: 87px;
height: 96px;
background: lightcyan;
}
.day14 {
width: 139px;
height: 96px;
background: orange;
}
.day15 {
width: 86px;
height: 65px;
background: lightcoral;
}
.day16 {
width: 75px;
height: 118px;
background: orange;
}
.day17 {
width: 88px;
height: 97px;
background: lightcoral;
}
.day18 {
width: 161px;
height: 97px;
background: cyan;
}
.day19 {
width: 98px;
height: 118px;
background: lightgreen;
}
.day20 {
width: 64px;
height: 97px;
background: lightgray;
}
.day21 {
width: 108px;
height: 97px;
background: lightsteelblue;
}
.day22 {
width: 150px;
height: 97px;
background: lightblue;
}
.day23 {
width: 65px;
height: 97px;
background: lightgray;
}
.day24 {
width: 98px;
height: 75px;
background: orange;
}
.day25 {
width: 65px;
height: 97px;
background: lightblue;
}
【问题讨论】：
-
任何你可以用 flex 做的事情，你都可以用 grid 做。事实上，他们一起工作得最好。使用网格进行整体布局，并在网格单元格或区域内弯曲。
-
您可以手动设置每个图像的绝对定位，同时保持 % 值响应。这听起来像是一个解决方案吗？
-
使用网格是最好的解决方案
-
@LaaouatniAnas 列和行有不同的大小，是否可以使用网格实现这种布局？怎么样？
-
我认为CSS不可能完成。例如，如果您尝试查看带有图像的 Google 搜索结果，您会发现它们具有相同的高度。用 Photoshop 画出你展示的图像很容易，但是 HTML 和 CSS 使用盒子模型。我看到的唯一解决方案是手动对齐每个框以获得此结果。但是我怀疑这是你问的。