css - 创建一个响应式网格，其中元素根据其大小占据要定位的可用空间

Question

使用此代码，我得到以下结果：

我想知道如何才能container > divs适应可用空间，就像在这张图片中一样：

我该怎么做？

.container{
  display:flex;
  flex-wrap:wrap;
  border:3px solid black;
}

.container > div{
  margin:5px 15px;
}

.son1{
  border:1px solid red;
  width:400px;
  height:400px;
}

.son2{
  border:1px solid blue;
  width:250px;
  height:220px;
}

.son3{
  border:1px solid blue;
  width:200px;
  height:270px;
}

<div class="container">
    <div class="son1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum cum totam voluptates, molestias aliquid quod, placeat harum inventore assumenda sed itaque perferendis eligendi tempore ullam, incidunt qui. Hic, recusandae, iste.
  
  </div>
  <div class="son2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam porro, aperiam facilis, optio illum molestiae. Doloribus, dolores numquam voluptatum at quae ducimus pariatur! Esse ullam facere aperiam veniam error tempora!
  </div>
  <div class="son3">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, dicta porro quia. Sed error nulla ratione temporibus, blanditiis aspernatur suscipit ipsum, odit expedita libero hic, asperiores eveniet adipisci quisquam labore!
  </div>
  
  <div class="son3">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, dicta porro quia. Sed error nulla ratione temporibus, blanditiis aspernatur suscipit ipsum, odit expedita libero hic, asperiores eveniet adipisci quisquam labore!
  </div>
  
</div>

注意：这是我真正的问题，通过这个例子我知道我可以解决我的问题

Answer 1

我为你做了一个网格系统。它会解决你的问题吗？请看一看，让我知道。

请注意，我没有在此代码段的响应方面工作。此外，还有一个溢出，我相信你可以轻松解决这个问题。

这是结果的屏幕截图。这是你想要的？

body {
  margin: 40px;
  font: 80% Arial, Helvetica, sans-serif;
}

.wrapper {
  display: grid;
  justify-items: center;
  justify-content: center;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 177px);
  grid-template-rows: repeat( 4, 180px);
  background-color: #fff;
  color: #444;
}

.box {
  border: 1px solid #444;
  padding: 20px;
  font-size: 150%;
  color: black;
}

.a {
  grid-column: 3 / 6;
  grid-row: 1 / 2;
  background-color: #444;
}

.c {
  grid-column: 3 / 6;
  grid-row: 2 / 3;
  background-color: beige;
}

.d {
  grid-column: 3 / 6;
  grid-row: 3 / 4;
  background-color: yellowgreen;
}

.e {
  grid-column: 1 / 3;
  grid-row: 1 / 4;
  align-self: stretch;
  background-color: burlywood;
}

.b {
  grid-column: 1 / 3;
  grid-row: 4 / 4;
  align-self: stretch;
  background-color: antiquewhite;
}

<div class="wrapper">
  <div class="box a">
    <p>This is box A. </p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus accusamus necessitatibus cumque fugit odit ducimus eveniet laboriosam amet veritatis impedit, sint explicabo! Excepturi, minus dolorum? Sapiente nam facere veniam. Nesciunt?</p>

  </div>
  <div class="box b">
    <p>This is box B.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus accusamus necessitatibus cumque fugit odit ducimus eveniet laboriosam amet veritatis impedit, sint explicabo! </p>

  </div>
  <div class="box c">
    <p>This is box C.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus accusamus necessitatibus cumque fugit odit ducimus eveniet laboriosam amet veritatis impedit, sint explicabo! Excepturi, minus dolorum? Sapiente nam facere veniam. Nesciunt?</p>

  </div>
  <div class="box d">
    <p>This is box D.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus accusamus necessitatibus cumque fugit odit ducimus eveniet laboriosam amet veritatis impedit, sint explicabo! Excepturi, minus dolorum? Sapiente nam facere veniam. Nesciunt?</p>

  </div>
  <div class="box e">
    <p>This is box E</p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni fugiat commodi, at quia atque sequi, libero tempora repellendus perferendis, quam aliquam. Itaque minima at, perferendis fugit vitae impedit facere possimus.
    </p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus accusamus necessitatibus cumque fugit odit ducimus eveniet laboriosam amet veritatis impedit, sint explicabo! Excepturi, minus dolorum? Sapiente nam facere veniam. Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus accusamus necessitatibus cumque fugit odit ducimus eveniet laboriosam amet veritatis impedit, sint explicabo! Excepturi, minus dolorum? Sapiente nam facere veniam. Nesciunt?</p>

  </div>
</div>

如果您正在寻找更多定制的网格，我强烈建议您使用这个库，它将对您有很大帮助：级联网格布局库

砌体的 Github 存储库

我希望这可以帮助您找到答案。

Answer 2

如果你想要不规则大小的容器排列可能最好使用浮动或砌体（jQuery 插件）。

但是如果你想非常明确地对齐列并让它们真正均匀地排列，那么 flexbox 就很棒。我已经删除了所有高度并将 flex-wrap: wrap 和 align-content: flex-start 添加到容器类以使其工作。

您可以使用它并添加您想要的间距，我将盒子模型放入 css 中，因此填充不会移动容器/增加它们的百分比宽度。

* {
box-sizing: border-box;
}

.container{
display: flex;
flex-wrap: wrap;
align-content: flex-start;

  border:3px solid black;
}

.container > div{

}

.son1{
  border:1px solid red;
  width: 60%;
}

.son2{
  border:1px solid blue;
  width: 40%;
}

.son3{
  border:1px solid blue;
}

<div class="container">
    <div class="son1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum cum totam voluptates, molestias aliquid quod, placeat harum inventore assumenda sed itaque perferendis eligendi tempore ullam, incidunt qui. Hic, recusandae, iste.
  
  </div>
  <div class="son2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam porro, aperiam facilis, optio illum molestiae. Doloribus, dolores numquam voluptatum at quae ducimus pariatur! Esse ullam facere aperiam veniam error tempora!
  </div>
  <div class="son1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, dicta porro quia. Sed error nulla ratione temporibus, blanditiis aspernatur suscipit ipsum, odit expedita libero hic, asperiores eveniet adipisci quisquam labore!
  </div>
  
  <div class="son2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, dicta porro quia. Sed error nulla ratione temporibus, blanditiis aspernatur suscipit ipsum, odit expedita libero hic, asperiores eveniet adipisci quisquam labore!
  </div>
  
</div>

Answer 3

如果你想只使用 CSS（没有 JS）创建一个垂直的 flexbox 砌体，你可以试试这个：

.masonry { /* Container */
  display: flex;
  flex-flow: column wrap;
  max-height: 1000px;
  margin-left: -8px; /* Adjustment for the gutter */
  width: 100%;
}

.masonry-brick {
  margin: 0 8px 8px 0; /* Some gutter */
  max-width: 33%; /* 3 columns */
}

.masonry { 
  display: flex;
  flex-flow: column wrap;
  max-height: 1000px;
  margin-left: -8px;
  width: 100%;
}

.masonry-brick {
  margin: 0 8px 8px 0;
  background-color: lightgrey;
  max-width: 33%;
}

<div class="masonry">

<div class="masonry-brick">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi massa, tristique vehicula ligula at, vulputate vulputate tortor. Etiam lobortis ex eu nunc tristique, in tristique quam placerat. Nullam in tempor felis. Fusce congue pretium urna, cursus suscipit dolor rutrum in. Sed ut sagittis purus. Suspendisse sed scelerisque lorem, sed rutrum dui. Morbi elementum aliquam ante, eget malesuada tortor mattis sed. Sed sit amet porta mauris. Sed sed sollicitudin lorem, non finibus leo. Vivamus sapien dui, bibendum at nibh nec, consectetur ornare justo. Sed ac augue id libero porttitor placerat. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi massa, tristique vehicula ligula at, vulputate vulputate tortor. Etiam lobortis ex eu nunc tristique, in tristique quam placerat. Nullam in tempor felis. Fusce congue pretium urna, cursus suscipit dolor rutrum in. 
</div>

<div class="masonry-brick">
Sed non euismod tellus. Mauris rhoncus nulla id eros blandit, facilisis gravida ex congue. Aliquam ullamcorper tristique enim, eget suscipit velit. Praesent non eros id diam molestie lacinia sed quis diam. Pellentesque semper sapien blandit risus consequat, nec tempus eros ultrices. Duis ornare magna posuere massa sollicitudin posuere vitae a mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  
</div>

<div class="masonry-brick">
Sed non euismod tellus. Mauris rhoncus nulla id eros blandit, facilisis gravida ex congue. Aliquam ullamcorper tristique enim, eget suscipit velit. Praesent non eros id diam molestie lacinia sed quis diam. Pellentesque semper sapien blandit risus consequat, nec tempus eros ultrices. Duis ornare magna posuere massa sollicitudin posuere vitae a mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  
</div>

<div class="masonry-brick">
Cras ac justo consectetur, fringilla tortor ac, tristique massa. Sed ultricies pretium nisi ac sollicitudin. Pellentesque viverra eros id blandit consequat. In turpis nulla, sodales ac tristique nec, volutpat quis felis. Curabitur mi quam, euismod sit amet egestas faucibus, rhoncus ac massa. Maecenas ac fringilla elit, quis eleifend ligula. Sed laoreet est ut dolor dictum, et feugiat leo ullamcorper. Phasellus ligula neque, finibus aliquam fermentum eget, lobortis at sem. Integer vulputate eu mauris eu ullamcorper.
</div>

<div class="masonry-brick">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi massa, tristique vehicula ligula at, vulputate vulputate tortor. Etiam lobortis ex eu nunc tristique, in tristique quam placerat. Nullam in tempor felis. Fusce congue pretium urna, cursus suscipit dolor rutrum in. Sed ut sagittis purus. Suspendisse sed scelerisque lorem, sed rutrum dui. Morbi elementum aliquam ante, eget malesuada tortor mattis sed. Sed sit amet porta mauris. Sed sed sollicitudin lorem, non finibus leo. Vivamus sapien dui, bibendum at nibh nec, consectetur ornare justo. Sed ac augue id libero porttitor placerat. 
</div>

<div class="masonry-brick">
Sed non euismod tellus. Mauris rhoncus nulla id eros blandit, facilisis gravida ex congue. Aliquam ullamcorper tristique enim, eget suscipit velit. Praesent non eros id diam molestie lacinia sed quis diam. Pellentesque semper sapien blandit risus consequat, nec tempus eros ultrices. Duis ornare magna posuere massa sollicitudin posuere vitae a mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi massa, tristique vehicula ligula at, vulputate vulputate tortor. Etiam lobortis ex eu nunc tristique, in tristique quam placerat. Nullam in tempor felis. Fusce congue pretium urna, cursus suscipit dolor rutrum in. Sed ut sagittis purus. Suspendisse sed scelerisque lorem, sed rutrum dui. Morbi elementum aliquam ante, eget malesuada tortor mattis sed. Sed sit amet porta mauris. Sed sed sollicitudin lorem, non finibus leo. Vivamus sapien dui, bibendum at nibh nec, consectetur ornare justo. Sed ac augue id libero porttitor placerat. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi massa, tristique vehicula ligula at, vulputate vulputate tortor. Etiam lobortis ex eu nunc tristique, in tristique quam placerat. Nullam in tempor felis. Fusce congue pretium urna, cursus suscipit dolor rutrum in. Sed ut sagittis purus. Suspendisse sed scelerisque lorem, sed rutrum dui. Morbi elementum aliquam ante, eget malesuada tortor mattis sed. Sed sit amet porta mauris. Sed sed sollicitudin lorem, non finibus leo. Vivamus sapien dui, bibendum at nibh nec, consectetur ornare justo. Sed ac augue id libero porttitor placerat. 
</div>

<div class="masonry-brick">
Sed non euismod tellus. Mauris rhoncus nulla id eros blandit, facilisis gravida ex congue. Aliquam ullamcorper tristique enim, eget suscipit velit. Praesent non eros id diam molestie lacinia sed quis diam. Pellentesque semper sapien blandit risus consequat, nec tempus eros ultrices. Duis ornare magna posuere massa sollicitudin posuere vitae a mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  
</div>

<div class="masonry-brick">
Cras ac justo consectetur, fringilla tortor ac, tristique massa. Sed ultricies pretium nisi ac sollicitudin. Pellentesque viverra eros id blandit consequat. In turpis nulla, sodales ac tristique nec, volutpat quis felis. Curabitur mi quam, euismod sit amet egestas faucibus, rhoncus ac massa. Maecenas ac fringilla elit, quis eleifend ligula. Sed laoreet est ut dolor dictum, et feugiat leo ullamcorper. Phasellus ligula neque, finibus aliquam fermentum eget, lobortis at sem. Integer vulputate eu mauris eu ullamcorper. Curabitur porta nibh nec metus scelerisque, eu ultricies augue viverra. Nam laoreet, libero vitae molestie condimentum, justo lorem vestibulum erat, sit amet elementum risus augue at erat.
</div>

<div class="masonry-brick">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi massa, tristique vehicula ligula at, vulputate vulputate tortor. Etiam lobortis ex eu nunc tristique, in tristique quam placerat. Nullam in tempor felis. Fusce congue pretium urna, cursus suscipit dolor rutrum in. Sed ut sagittis purus. Suspendisse sed scelerisque lorem, sed rutrum dui. Morbi elementum aliquam ante, eget malesuada tortor mattis sed. Sed sit amet porta mauris.
</div>

<div class="masonry-brick">
Sed non euismod tellus. Mauris rhoncus nulla id eros blandit, facilisis gravida ex congue. Aliquam ullamcorper tristique enim, eget suscipit velit. Praesent non eros id diam molestie lacinia sed quis diam. Pellentesque semper sapien blandit risus consequat, nec tempus eros ultrices. Duis ornare magna posuere massa sollicitudin posuere vitae a mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>

<div class="masonry-brick">
Sed non euismod tellus. Mauris rhoncus nulla id eros blandit, facilisis gravida ex congue. Aliquam ullamcorper tristique enim, eget suscipit velit. Praesent non eros id diam molestie lacinia sed quis diam. Pellentesque semper sapien blandit risus consequat, nec tempus eros ultrices. Duis ornare magna posuere massa sollicitudin posuere vitae a mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  
</div>

<div class="masonry-brick">
Cras ac justo consectetur, fringilla tortor ac, tristique massa. Sed ultricies pretium nisi ac sollicitudin. Pellentesque viverra eros id blandit consequat. In turpis nulla, sodales ac tristique nec, volutpat quis felis. Curabitur mi quam, euismod sit amet egestas faucibus, rhoncus ac massa. Maecenas ac fringilla elit, quis eleifend ligula. Sed laoreet est ut dolor dictum, et feugiat leo ullamcorper. Phasellus ligula neque, finibus aliquam fermentum eget, lobortis at sem. Integer vulputate eu mauris eu ullamcorper.
</div>

</div>