当前位置：文江博客话题详情

仅CSS的砌体布局

发布于 2025-02-08 13:58:20 字数 1347 浏览 1 评论 0 原文

我需要实现砌体布局。但是，由于多种原因，我不想使用JavaScript进行操作。

参数：

所有元素的宽度
元素具有无法计算的服务器端的高度（图像加上各种文本），
我可以使用固定数量的列生活如果我必须有

一个微不足道的解决方案，可以在现代浏览器中起作用，属性。

该解决方案的问题是在列中排序元素：

虽然我需要排成行排序的元素，但至少大约是：

我尝试过的方法：

制作项目 display：inline-block ： wastes垂直空间。
制作项目 float：float：left ：大声笑，否。

现在i 可以更改服务器端渲染并重新排序的项目，并重新排序数量的项目按列数量数量，但这很复杂，容易出错（基于浏览器决定将项目列表拆分为列），因此，如果可能的话，我想避免使用。

是否有一些flexbox魔术可以实现这一目标？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长梦不多时 2025-02-15 13:58:20

2021更新

CSS网格布局3级3包括砌体功能。

代码将看起来像这样：

grid-template-rows: masonry
grid-template-columns: masonry

截至2021年3月，它仅在Firefox（激活标志之后）可用。

https：//drafts.csswg.org/css-grid-3/#masonry -layout

end Update; 下面的原始答案

Flexbox

无法使用

flexbox，至少没有以干净有效的方式使用动态砌体布局。 FlexBox是一个一维布局系统。这意味着它可以沿水平或垂直线对齐。弹性项目仅限于其行或列。

真正的网格系统是二维的，这意味着它可以沿水平和垂直线对齐。内容项可以同时跨越行和列跨越，flex项目无法做到。

这就是为什么Flexbox的建筑网格能力有限的原因。这也是W3C开发另一种CSS3技术的原因， grid布局 。

`行包裹`

在带有 Flex-Flow的Flex容器中：行包裹，Flex项目必须包装到New Rows 。

这意味着 flex项目不能在同一行中的另一个项目下包裹 。

在上面的情况下， div＃3 在 div＃1 下面包裹，创建一个新行。它不能在 div＃2 下包裹。

结果，当项目不是排最高的项目时，空白处仍然存在，从而造成难看的空白。

`列包裹`

如果切换到 flex-flow：列包裹，则可以实现类似网格的布局。但是，柱方向容器立即在蝙蝠中有四个潜在的问题：

弯曲物品垂直流动，而不是水平（如在这种情况下需要的）。
容器水平扩展，而不是垂直扩展（例如Pinterest布局）。
它要求容器具有固定的高度，因此项目知道在哪里包装。
在撰写本文时，它具有一个所有主要浏览器中的缺陷，其中容器没有扩展以适应其他列。

结果，在这种情况下，在许多其他情况下，都不是列方向容器。

CSS网格带有项目尺寸未定义的

网格布局，如果可以预先确定内容项目的各个高度，则是您问题的完美解决方案。所有其他要求都符合网格的能力。

必须知道网格项目的宽度和高度，以便与周围物品缩小差距。

因此，在这种情况下，网格是建造水平砌体布局的最佳CSS所提供的。

实际上，在CSS技术到达具有自动缩小差距的能力之前，CSS通常没有解决方案。这样的事情可能需要将文档进行回流，因此我不确定它将有多有用或有效。

您需要一个脚本。

JavaScript解决方案倾向于使用绝对定位，该定位从文档流中删除内容项，以便在没有间隙的情况下重新安排它们。这里有两个示例：

desandro Masonry

砌体是一个JavaScript网格布局库。它
通过根据可用的最佳位置将元素放置在最佳位置的作品
垂直空间，有点像墙壁上的梅森装饰石头。

^{来源： http://masonry.desandro.com/}

如何构建一个像Pinterest这样工作的网站

[Pinterest]确实是一个很酷的网站，但是我发现有趣的是如何布置这些针板...因此本教程的目的是重新创建此响应式障碍物自己...

^{来源： https://benholland.me/javascript/2012/02/20/how-to-build-a-site-a-site-site-site-works-works-like-pinterest.html}

css grid 在已知内容项目的宽度和高度的布局中定义了项目尺寸

，这是纯CSS中的水平流动砌体布局：

grid-container {
  display: grid;                                                /* 1 */
  grid-auto-rows: 50px;                                         /* 2 */
  grid-gap: 10px;                                               /* 3 */
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */
}

[short] {
  grid-row: span 1;                                             /* 5 */
  background-color: green;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  font-weight: bold;
  color: white;
}

<grid-container>
  <grid-item short>01</grid-item>
  <grid-item short>02</grid-item>
  <grid-item tall>03</grid-item>
  <grid-item tall>04</grid-item>
  <grid-item short>05</grid-item>
  <grid-item taller>06</grid-item>
  <grid-item short>07</grid-item>
  <grid-item tallest>08</grid-item>
  <grid-item tall>09</grid-item>
  <grid-item short>10</grid-item>
  <grid-item tallest>etc.</grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

jsfiddle demo 建立一个块 - 级别的网格容器。（> >内联网格将是另一个选项）
Grid-Auto-Rows 属性设置了自动生成的行的高度。在此网格中，每一行高50px。
grid-gap << /strong> 属性是网格 - 列 - gap 和网格 - 行gap 的速记。该规则在网格项目之间设置了10px Gap 。（它不适用于项目和容器之间的区域。）
网格 - 拼写 - 列 属性设置了明确定义的列的宽度。

重复重复 < /strong> 符号定义了重复列（或行）的模式。

auto-fill 函数告诉网格在不溢出容器的情况下将尽可能多的列（或行）对齐。（这可以与Flex Layout的 Flex-wrap：Wrap 。）

创建类似的行为。

minmax（） 功能为每列（或行）设置最小和最大尺寸范围。在上面的代码中，每列的宽度至少为容器的30％，最大的可用空间的最大值。

fr fr < /strong>单位代表网格容器中自由空间的一小部分。它与Flexbox的 Flex-Grow 属性相当。
with gode> gode> gode> gode> gode> gode> gode> gode> gode> gode> gode> gode> gode> gode> gode> gode> gode> gode> grid-row 和代码>跨度 我们正在告诉网格项目，它们应该跨越多少行。

2021 Update

CSS Grid Layout Level 3 includes a masonry feature.

Code will look like this:

grid-template-rows: masonry
grid-template-columns: masonry

As of March 2021, it's only available in Firefox (after activating the flag).

end update; original answer below

Flexbox

A dynamic masonry layout is not possible with flexbox, at least not in a clean and efficient way.

Flexbox is a one-dimensional layout system. This means it can align items along horizontal OR vertical lines. A flex item is confined to its row or column.

A true grid system is two-dimensional, meaning it can align items along horizontal AND vertical lines. Content items can span across rows and columns simultaneously, which flex items cannot do.

This is why flexbox has a limited capacity for building grids. It's also a reason why the W3C has developed another CSS3 technology, Grid Layout.

`row wrap`

In a flex container with flex-flow: row wrap, flex items must wrap to new rows.

This means that a flex item cannot wrap under another item in the same row.

Notice above how div #3 wraps below div #1, creating a new row. It cannot wrap beneath div #2.

As a result, when items aren't the tallest in the row, white space remains, creating unsightly gaps.

`column wrap`

If you switch to flex-flow: column wrap, a grid-like layout is more attainable. However, a column-direction container has four potential problems right off the bat:

Flex items flow vertically, not horizontally (like you need in this case).
The container expands horizontally, not vertically (like the Pinterest layout).
It requires the container to have a fixed height, so the items know where to wrap.
As of this writing, it has a deficiency in all major browsers where the container doesn't expand to accommodate additional columns.

As a result, a column-direction container is not an option in this case, and in many other cases.

CSS Grid with item dimensions undefined

Grid Layout would be a perfect solution to your problem if the various heights of the content items could be pre-determined. All other requirements are well within Grid's capacity.

The width and height of grid items must be known in order to close gaps with surrounding items.

So Grid, which is the best CSS has to offer for building a horizontally-flowing masonry layout, falls short in this case.

In fact, until a CSS technology arrives with the ability to automatically close the gaps, CSS in general has no solution. Something like this would probably require reflowing the document, so I'm not sure how useful or efficient it would be.

You'll need a script.

JavaScript solutions tend to use absolute positioning, which removes content items from the document flow in order to re-arrange them with no gaps. Here are two examples:

Desandro Masonry

Masonry is a JavaScript grid layout library. It
works by placing elements in optimal position based on available
vertical space, sort of like a mason fitting stones in a wall.

^{source: http://masonry.desandro.com/}

How to Build a Site that Works Like Pinterest

[Pinterest] really is a cool site, but what I find interesting is how these pinboards are laid out... So the purpose of this tutorial is to re-create this responsive block effect ourselves...

^{source: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html}

CSS Grid with item dimensions defined

For layouts where the width and height of content items are known, here's a horizontally-flowing masonry layout in pure CSS:

grid-container {
  display: grid;                                                /* 1 */
  grid-auto-rows: 50px;                                         /* 2 */
  grid-gap: 10px;                                               /* 3 */
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */
}

[short] {
  grid-row: span 1;                                             /* 5 */
  background-color: green;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  font-weight: bold;
  color: white;
}

<grid-container>
  <grid-item short>01</grid-item>
  <grid-item short>02</grid-item>
  <grid-item tall>03</grid-item>
  <grid-item tall>04</grid-item>
  <grid-item short>05</grid-item>
  <grid-item taller>06</grid-item>
  <grid-item short>07</grid-item>
  <grid-item tallest>08</grid-item>
  <grid-item tall>09</grid-item>
  <grid-item short>10</grid-item>
  <grid-item tallest>etc.</grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

jsFiddle demo

How it works

Establish a block-level grid container. (inline-grid would be the other option)
The grid-auto-rows property sets the height of automatically generated rows. In this grid each row is 50px tall.
The grid-gap property is a shorthand for grid-column-gap and grid-row-gap. This rule sets a 10px gap between grid items. (It doesn't apply to the area between items and the container.)
The grid-template-columns property sets the width of explicitly defined columns.

The repeat notation defines a pattern of repeating columns (or rows).

The auto-fill function tells the grid to line up as many columns (or rows) as possible without overflowing the container. (This can create a similar behavior to flex layout's flex-wrap: wrap.)

The minmax() function sets a minimum and maximum size range for each column (or row). In the code above, the width of each column will be a minimum of 30% of the container and maximum of whatever free space is available.

The fr unit represents a fraction of the free space in the grid container. It's comparable to flexbox's flex-grow property.
With grid-row and span we're telling grid items how many rows they should span across.

回复收藏 0 原文

℉絮湮 2025-02-15 13:58:20

This is recently discovered technique involving flexbox: https://tobiasahlin.com/blog/masonry-with- CSS/。

这篇文章对我来说很有意义，但是我没有尝试使用它，所以我不知道是否有任何警告，除了迈克尔的答案中提到。

这是文章中的一个示例，使用 order 属性，与结合：nth-Child 。

堆栈片段

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 960px;
  
  /* Optional */
  background-color: #f7f7f7;
  border-radius: 3px;
  padding: 20px;
  width: 60%;
  margin: 40px auto;
  counter-reset: items;
}

.item {
  width: 24%;
  /* Optional */
  position: relative;
  margin-bottom: 2%;
  border-radius: 3px;
  background-color: #a1cbfa;
  border: 1px solid #4290e2;
  box-shadow: 0 2px 2px rgba(0,90,250,0.05),
    0 4px 4px rgba(0,90,250,0.05),
    0 8px 8px rgba(0,90,250,0.05),
    0 16px 16px rgba(0,90,250,0.05);
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
}

 /* Just to print out numbers */
div.item::before {
  counter-increment: items;
  content: counter(items);
}

/* Re-order items into 3 rows */
.item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n)   { order: 4; }

/* Force new columns */
.break {
  flex-basis: 100%;
  width: 0;
  border: 1px solid #ddd;
  margin: 0;
  content: "";
  padding: 0;
}

body { font-family: sans-serif; }
h3 { text-align: center; }

<div class="container">
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 190px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 120px"></div>
  <div class="item" style="height: 160px"></div>
  <div class="item" style="height: 180px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 150px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 190px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 120px"></div>
  <div class="item" style="height: 160px"></div>
  <div class="item" style="height: 180px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 150px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 170px"></div>
  
  <span class="item break"></span>
  <span class="item break"></span>
  <span class="item break"></span>
</div>

This is recently discovered technique involving flexbox: https://tobiasahlin.com/blog/masonry-with-css/.

The article makes sense to me, but I haven't tried to use it, so I don't know if there are any caveats, other than mentioned in Michael's answer.

Here's a sample from the article, making use of the order property, combined with :nth-child.

Stack snippet

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 960px;
  
  /* Optional */
  background-color: #f7f7f7;
  border-radius: 3px;
  padding: 20px;
  width: 60%;
  margin: 40px auto;
  counter-reset: items;
}

.item {
  width: 24%;
  /* Optional */
  position: relative;
  margin-bottom: 2%;
  border-radius: 3px;
  background-color: #a1cbfa;
  border: 1px solid #4290e2;
  box-shadow: 0 2px 2px rgba(0,90,250,0.05),
    0 4px 4px rgba(0,90,250,0.05),
    0 8px 8px rgba(0,90,250,0.05),
    0 16px 16px rgba(0,90,250,0.05);
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
}

 /* Just to print out numbers */
div.item::before {
  counter-increment: items;
  content: counter(items);
}

/* Re-order items into 3 rows */
.item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n)   { order: 4; }

/* Force new columns */
.break {
  flex-basis: 100%;
  width: 0;
  border: 1px solid #ddd;
  margin: 0;
  content: "";
  padding: 0;
}

body { font-family: sans-serif; }
h3 { text-align: center; }

<div class="container">
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 190px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 120px"></div>
  <div class="item" style="height: 160px"></div>
  <div class="item" style="height: 180px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 150px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 190px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 120px"></div>
  <div class="item" style="height: 160px"></div>
  <div class="item" style="height: 180px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 150px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 170px"></div>
  
  <span class="item break"></span>
  <span class="item break"></span>
  <span class="item break"></span>
</div>

回复收藏 0 原文

呆萌少年 2025-02-15 13:58:20

我发现这个解决方案，它很可能与所有浏览器兼容。

注意：如果有人发现任何错误或浏览器支持问题。请更新此答案或评论

css proppery支持参考：

列计数，间隙，填充 break-inside ， PAGE-BREAK-INSIDE

注意： Page-Break-inside 此属性已被 Break-break-inside 属性所取代。

  

.container {
  -moz-column-count: 1;
       column-count: 1;
  -moz-column-gap: 20px;
       column-gap: 20px;
  -moz-column-fill: balance;
       column-fill: balance;
  margin: 20px auto 0;
  padding: 2rem;
}
.container .item {
  display: inline-block;
  margin: 0 0 20px;
  page-break-inside: avoid;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  width: 100%;
}
.container .item img {
  width: 100%;
  height: auto;
}
@media (min-width: 600px) {
  .container {
    -moz-column-count: 2;
         column-count: 2;
  }
}
@media (min-width: 900px) {
  .container {
    -moz-column-count: 3;
         column-count: 3;
  }
}
@media (min-width: 1200px) {
  .container {
    -moz-column-count: 4;
         column-count: 4;
  }
}

   
 CSS-Only Masonry Layout 
  
<div class="container">
  <div class="item"><img src="https://placeimg.com/600/400/animals" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/600/arch" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/300/nature" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/450/people" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/350/tech" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/800/animals/grayscale" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/650/arch/sepia" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/300/nature/grayscale" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/400/people/sepia" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/600/tech/grayscale" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/200/animals/sepia" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/700/arch/grayscale" alt=""></div>
</div>

I find This solution, It is most probably compatible with all browsers.

Note: if anyone finds any error or browser support issues. please update this answer Or comments

CSS Profpery Support reference:

column-count, gap, fill break-inside, page-break-inside

Note: page-break-inside This property has been replaced by the break-inside property.

  

.container {
  -moz-column-count: 1;
       column-count: 1;
  -moz-column-gap: 20px;
       column-gap: 20px;
  -moz-column-fill: balance;
       column-fill: balance;
  margin: 20px auto 0;
  padding: 2rem;
}
.container .item {
  display: inline-block;
  margin: 0 0 20px;
  page-break-inside: avoid;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  width: 100%;
}
.container .item img {
  width: 100%;
  height: auto;
}
@media (min-width: 600px) {
  .container {
    -moz-column-count: 2;
         column-count: 2;
  }
}
@media (min-width: 900px) {
  .container {
    -moz-column-count: 3;
         column-count: 3;
  }
}
@media (min-width: 1200px) {
  .container {
    -moz-column-count: 4;
         column-count: 4;
  }
}

   
 CSS-Only Masonry Layout 
  
<div class="container">
  <div class="item"><img src="https://placeimg.com/600/400/animals" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/600/arch" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/300/nature" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/450/people" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/350/tech" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/800/animals/grayscale" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/650/arch/sepia" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/300/nature/grayscale" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/400/people/sepia" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/600/tech/grayscale" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/200/animals/sepia" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/700/arch/grayscale" alt=""></div>
</div>

回复收藏 0 原文

凡间太子 2025-02-15 13:58:20

这是使用CSS 列的响应方式。
注意：元素是按列排序的，而不是按行排序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Responsive Grid Layout</title>
</head>
<body>
    <div class="wrapper">
        <div class="box box1">Content of box 1</div>
        <div class="box box2">Content of box 2</div>
        <div class="box box3">Content of box 3</div>
        <div class="box box4">Content of box 4</div>
        <div class="box box5">Content of box 5</div>
        <div class="box box6">Content of box 6</div>
        <div class="box box7">Content of box 7</div>
    </div>
</body>
</html>

body {
    margin: 0;
    display: flex;
    justify-content: center;
}

.wrapper {
  column-count: auto;
  column-width: 320px; /* 300px + 20px gap */
  column-gap: 20px;
  width: 100%;
  max-width: 1000px;
  padding: 20px;
  box-sizing: border-box;
}

.box {
  background-color: lightblue;
  border: 1px solid blue;
  padding: 20px;
  font-size: 1.5em;
  text-align: center;
  width: 300px;
  box-sizing: border-box;
  display: inline-block;
  margin-bottom: 20px;
  break-inside: avoid-column;
}

.box1 {
  height: 800px;
}
.box2 {
  height: 300px;
}
.box3 {
  height: 300px;
}
.box4 {
  height: 300px;
}

here's the responsive way using css columns.
Note: elements are ordered by column and not by row.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Responsive Grid Layout</title>
</head>
<body>
    <div class="wrapper">
        <div class="box box1">Content of box 1</div>
        <div class="box box2">Content of box 2</div>
        <div class="box box3">Content of box 3</div>
        <div class="box box4">Content of box 4</div>
        <div class="box box5">Content of box 5</div>
        <div class="box box6">Content of box 6</div>
        <div class="box box7">Content of box 7</div>
    </div>
</body>
</html>

body {
    margin: 0;
    display: flex;
    justify-content: center;
}

.wrapper {
  column-count: auto;
  column-width: 320px; /* 300px + 20px gap */
  column-gap: 20px;
  width: 100%;
  max-width: 1000px;
  padding: 20px;
  box-sizing: border-box;
}

.box {
  background-color: lightblue;
  border: 1px solid blue;
  padding: 20px;
  font-size: 1.5em;
  text-align: center;
  width: 300px;
  box-sizing: border-box;
  display: inline-block;
  margin-bottom: 20px;
  break-inside: avoid-column;
}

.box1 {
  height: 800px;
}
.box2 {
  height: 300px;
}
.box3 {
  height: 300px;
}
.box4 {
  height: 300px;
}

回复收藏 0 原文

~没有更多了~

关于作者

潦草背影

暂无简介

文章

27 人气

关注发私信

友情链接

文江博客

仅CSS的砌体布局

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

2021更新

Flexbox

`行包裹`

`列包裹`

CSS网格带有项目尺寸未定义的

css grid 在已知内容项目的宽度和高度的布局中定义了项目尺寸

2021 Update

Flexbox

`row wrap`

`column wrap`

CSS Grid with item dimensions undefined

CSS Grid with item dimensions defined

jsFiddle demo

关于作者

相关话题

热门标签

推荐作者

alipaysp_snBf0MSZIv

梦断已成空

瞎闹

凯凯我们等你回来

寄意

似梦非梦

友情链接

仅CSS的砌体布局

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

2021更新

Flexbox

行包裹

列包裹

CSS网格带有项目尺寸未定义的

css grid 在已知内容项目的宽度和高度的布局中定义了项目尺寸

2021 Update

Flexbox

row wrap

column wrap

CSS Grid with item dimensions undefined

CSS Grid with item dimensions defined

jsFiddle demo

关于作者

相关话题

热门标签

推荐作者

alipaysp_snBf0MSZIv

梦断已成空

瞎闹

凯凯我们等你回来

寄意

似梦非梦

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

`行包裹`

`列包裹`

`row wrap`

`column wrap`