CSS网格的砌体布局 [英] Masonry layout with css grid

问题描述

我正在尝试使用CSS网格布局创建砖石布局.网格中的所有项目均具有可变高度.而且我不知道会是什么东西.因此，我无法为每个项目定义grid-row.是否可以在列中上一个项目的结尾之后立即开始每个新项目?

I'm trying to create masonry layout using css grid layout. All items in grid have variable heights. And I don't know what items will be. So I can't define grid-row for each item. Is it possible to start each new item right after end of previous in column?

我正在尝试的代码:

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 330px);
  align-items: flex-start;
  grid-column-gap: 10px;
  grid-row-gap: 50px;
}

.item {
  background: black;
  border-radius: 5px;
}

<div class="wrapper">
  <div class="item" style="height:50px"></div>
  <div class="item" style="height:100px"></div>
  <div class="item" style="height:30px"></div>
  <div class="item" style="height:90px"></div>
  <div class="item" style="height:80px"></div>
  <div class="item" style="height:50px"></div>
  <div class="item" style="height:70px"></div>
  <div class="item" style="height:40px"></div>

</div>

完整的数字笔在此处

推荐答案

在您的问题中，您正在分别设置每个项目的高度.如果您愿意这样做，则可以轻松地使用网格实现砌体布局.

In your question you are setting the height of each item individually. If you are happy to do this then a Masonry layout can easily be achieved with grid.

不是为每个项目集grid-row-end设置高度，而是使每个项目跨越一定的行数.

Instead of setting a height for each item set grid-row-end so that each item spans a certain number of rows.

 <div class="item" style="grid-row-end: span 5"></div>

然后，项目的高度将取决于您为网格设置的grid-auto-rows和grid-row-gap的值.

The height of the item will then depend on the values of grid-auto-rows and grid-row-gap you have set for the grid.

我在这里制作了Codepen: https://codepen.io/andybarefoot/pen/NaprOB

I have made a Codepen here: https://codepen.io/andybarefoot/pen/NaprOB

如果不想为每个项目单独设置grid-row-end值，则可以使用一些JavaScript来动态地进行设置.我在每个项目中放入另一个容器" div，然后测量该容器的高度，以计算该项目需要跨越多少行.我在页面加载时执行此操作，然后在加载任何图像时针对每个项目再次执行此操作(因为内容的高度将发生变化).如果将此方法与响应式布局相结合，则还应在页面调整大小时重新计算，因为列的宽度可能已更改，这将影响内容的高度.

If you don't want to individually set the grid-row-end value for each item you can use a bit of JavaScript to do it dynamically. I put another "container" div inside each item and measure the height of this container to calculate how many rows the item needs to span. I do this on page load, and again for each item when any images are loaded (as the height of the content will have changed). If you combine this approach with a responsive layout then you should also recalculate on page resize as the width of the columns may have changed and this will affect the height of the content.

这是我调整响应列大小的完整示例: https://codepen.io/andybarefoot/pen/QMeZda

Here's my full example with responsive column resizing: https://codepen.io/andybarefoot/pen/QMeZda

如果您拥有宽度可变的物品，您仍然可以达到类似的效果，但是网格的包装不会是完美的，并且可以更改物品的顺序以优化包装.

If you have items with variable widths you can still achieve a similar effect but the packing of the grid won't be perfect and the item order may be changed to optimise the packing.

我在Medium上写了一篇关于这种方法的博客，以防万一:使用CSS Grid的砖石样式布局

I wrote a blog on Medium about this approach in case it is of interest: A Masonry style layout using CSS Grid

这篇关于CSS网格的砌体布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！