创建具有动态内容的不对称双列网格的最佳方法是什么？ [英] What is the best way to create an asymmetrical two-column grid with dynamic content?

问题描述

我有动态内容流入两列网格。 Flex盒子是一个不错的解决方案，但它强制行高度相同，当有更多的内容创建一些尴尬的白色空间。有没有人知道一个轻量级的解决方案，可以实现在下面的图像希望清楚沟通？

代码为我目前的解决方案：

.grid-container {display：flex; flex-wrap：wrap;证明内容：空间之间;高度：自动;高度：700像素; overflow-y：scroll;}。contained-cell {width：48.5％; padding：40px 20px;

$ b

在您的代码中，默认情况下，Flex项目在一行中对齐（ flex-direction：row ）。而且默认情况下，flex项目将拉伸到占用容器的全部可用高度（ align-items：stretch ）–从而创建相同高度的列。

可以使用 align-items：flex-start 只能够容纳其内容。但是，正如你所指出的那样，这不会改变行的高度，结果是项目之间会有很多垂直的空白。

标准解决方案这个布局是 jQuery Masonry ，当他们在他们的网站上写道根据可用的垂直空间将元素放置在最佳位置，就像在墙上镶嵌石块的石匠一样。这是一个选项。

但是，另一个flexbox解决方案是将 flex-direction 从 row 更改为 column 。使用这个设置，高度相同的行不适用，垂直空白不是问题，每个flex项目可以是它自己的高度。

这是一个演示： http://jsfiddle.net/8rq0maL4/1/

I have dynamic content flowing into a two-column grid. Flex box is a nice solution, but it forces the rows to be the same height, creating some awkward white space when one has more content. Does anyone know of a lightweight solution that can achieve what is hopefully clearly communicated in the below image?

Code for my current solution:

.grid-container {
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
  height:auto;
  height:700px;
  overflow-y:scroll;
}
.contained-cell{
  width:48.5%;
  padding:40px 20px;

解决方案

In your code, the flex items are aligned in a row by default (flex-direction: row). And also by default, flex items will stretch to occupy the full available height of the container (align-items: stretch) – thus creating equal height columns.

You could use align-items: flex-start to make each flex item stretch only enough to contain its content. But then, as you've noted, this doesn't change the height of the row, and the result is lots of vertical white space between items.

The standard solution for this layout is jQuery Masonry which, as they write on their website, works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. That's one option.

Keeping to CSS, however, another flexbox solution is changing the flex-direction from row to column. With this set-up, equal height rows don't apply, vertical whitespace isn't an issue, and each flex item can be its own height.

Here's a demo: http://jsfiddle.net/8rq0maL4/1/

这篇关于创建具有动态内容的不对称双列网格的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！