CSS html网格布局

Question

我试图像这样创建一个网格：

• 所有项目的高度可能会有所不同
• 高度最高的项目定义行的高度
• 如果可能的话，我不想在列div中包装每一行，以使我的代码更清晰。

我尝试过：

• 使用浮动，但这不可能，因为我仍然需要清除每一行

由于

Answer 1

您可以使用Flexbox创建此布局。您只需要在flex-container上设置flex-wrap: wrap，以便flex-items中断到新行，最高项目将设置该行的高度。

＆＃13;

＆＃13;

.content {
  display: flex;
  flex-wrap: wrap;
}
.content > div {
  background: red;
  flex: 0 0 calc(33.33% - 20px);
  margin: 10px;
}

＆＃13;

<div class="content">
  <div style="height: 100px">Div</div>
  <div style="height: 150px">Div</div>
  <div style="height: 90px">Div</div>
  <div style="height: 80px">Div</div>
  <div style="height: 70px">Div</div>
  <div style="height: 120px">Div</div>
  <div style="height: 100px">Div</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我相信您可以使用CSS columns-count，column-fill:auto;以及break-inside的变体来实现您的目标。请参阅下面的代码，例如：

#row {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -moz-column-fill: auto; /* Firefox */
    column-fill: auto;
    
    margin-bottom: 2em;
}

#row p { 
    margin: 0; 
    padding: 0 0 10px 0;
    page-break-inside: avoid; /* For Firefox. */
    -webkit-column-break-inside: avoid; /* For Chrome & friends. */
    break-inside: avoid; /* For standard browsers like IE. :-) */
}

<div id="row">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lacus lobortis, ornare tellus eu, placerat diam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lacus lobortis, ornare tellus eu, placerat diam. Vestibulum ultricies ante lacus, non vehicula nulla pharetra sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="row">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lacus lobortis, ornare tellus eu, placerat diam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lacus lobortis, ornare tellus eu, placerat diam. Vestibulum ultricies ante lacus, non vehicula nulla pharetra sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>