CSS网格布局，没有预先确定每个单元格的列数

Question

有 6 列的网格。网格的每一列是50px

Content 1: <section><p>hello</p></section>
Content 2: <section><img width="110"></section>
Content 3: <section><p>goodbye</p></section>
Content 4: <section><img width="250"></section>
Content 5: <section><img width="65"></section>

我希望此内容以某种方式知道按如下布局，而不会被“告知”每条内容占用多少列：

|----------|----------|----------|----------|----------|----------|
|          |                                |          |
| hello    | 110px-wide image               | goodbye  |
|          |                                |          |
|----------|----------|----------|----------|----------|----------|
|                                                      |
| 200px-wide image
|                                                      |
|----------|----------|----------|----------|----------|----------|
|                     |
| 65px-wide image     |
|                     |
|----------|----------|----------|----------|----------|----------|

在任何得到相当广泛支持的 CSS 中是否有任何方法可以设置一个网格，无需将任何 col-x 类型类或显式宽度附加到每个部分元素？

我尝试使用 flexbox 的示例，但我不确定如何告诉它“网格列是 50 像素宽，其中有 6 个”：

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    align-items: space-between;
    align-content: center;
}
section {
    border: 1px black solid;
    flex-basis: auto;
    flex-grow: 6;
    flex-shrink: 1;
}

<div class="grid">
  <section><p>hello</p></section>
  <section><img src="http://comefillyourcup.com/wp-content/uploads/2015/12/2880x1800-bright-ube-solid-color-background-128x128.jpg" width="110"></section>
  <section><p>goodbye</p></section>
  <section><img src="https://i.imgur.com/WgbsUUv.png" width="250"></section>
  <section><img src="https://i.imgur.com/SUl31R3.png" width="65"></section>
</div>

Answer 1

您可以像这样简单地制作section inline-block：

.grid {
  display: flex;
  flex-wrap: wrap;
}

img {
  max-width: 100%;
}

section {
  display: inline-block;
  vertical-align:top;
  border: 1px solid #000;
  min-height: 100px;
}

<div class="grid">
  <section>
    <p>hello</p>
  </section>
  <section><img src="http://coschedule.com/blog/wp-content/uploads/linkedin-recommended-image-sizes-770x884.png" width="410"></section>
  <section>
    <p>goodbye</p>
  </section>
  <section><img src="http://3.bp.blogspot.com/_w0r3cYUSD7A/Sob415afOVI/AAAAAAAABa4/-J_vkiTkITE/s1600/sunflare.jpg" width="1000"></section>
  <section><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Wide%2C_Samuel_1892.jpg/200px-Wide%2C_Samuel_1892.jpg" width="250"></section>
</div>