CSS响应网格布局，可自动适应屏幕宽度

Question

我试图弄清楚airbnb如何使用网格布局显示照片。

示例1示例2

这与网格布局本身无关，而是它们如何确定何时每行显示1、2甚至3个图像，以及如何确定行数。

似乎每个照片库的布局都是独一无二的。

起初，我认为对于每一行，给出1到3之间的随机值来确定应该显示多少图像，但布局总是相同的。

有人有任何线索可以通过不同数量的照片来实现这种布局吗？

编辑：

根据评论，砖石结构类似于

<div class="container">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
<div id="item4"></div>
<div id="item5"></div>
<div id="item6"></div>
<div id="item7"></div>
</div>

但例子是(简化的(

<div class="container">
<div class="row">
<div id="item1"></div>
</div>
<div class="row">
<div id="item2"></div>
<div id="item3"></div>
<div id="item4"></div>
</div>
<div class="row">
<div id="item5"></div>
<div id="item6"></div>
</div>
<div class="row">
<div id="item7"></div>
</div>
</div>

编辑2

其他示例

示例4

与示例1相同数量的图像布局是不同的

在示例中，第一行包含3个项目在示例4中，包含1个项目的第一行

这一选择的条件是什么？

Answer 1

1。这被称为砖石布局，airBnb只有两个布局，一个垂直，一个水平

遵循此官方MDN文档了解更多关于砌体布局的信息

2。现在，对于布局，您作为示例1共享的链接具有列布局的垂直图像，而示例2具有第一个侧向图像的是行布局。

3.他们如何决定使用哪个布局这里有两件重要的事情需要理解，第一是决定要显示的主布局的视口，第二个打开的链接数[是的…你可以跟踪用户在浏览器中打开了多少链接，因此chorm和firefox中的选项卡很有名]，这告诉SSR(服务器端渲染页面(引擎旋转布局

奖励通过重新创建熟悉的布局来自学CSS网格的技巧：Airbnb、Youtube和更多