Grid：强制第二行单元格宽度独立

Question

我有这段代码，显示一行多列。 当屏幕的宽度低于限制（使用媒体查询）时，我希望某些单元格传递到第二行，但宽度独立于第一行。

HTML

<div class="grid">
    <div class="c1">1</div>
    <div class="c2">2</div>
    <div class="c3">3</div>
    <div class="c4">4</div>
    <div class="c5">5</div>
    <div class="c6">6</div>
    <div class="c7">7</div>
</div>

CSS

.grid {display: grid; width: 100%; grid-template-columns: 50px auto 70px 250px 60px 60px 60px;}
@media screen and (max-width: 1070px) {
.grid {grid-template-columns: 50px auto 70px 250px;}
.grid .c5 {grid-column-start: 1;}
}

结果大屏：

+-----------------------------------+
| 1 |   2   | 3 |   4   | 5 | 6 | 7 |
+-----------------------------------+

结果屏幕 < 1070px (not what I want) : I have a line break in cells 5,6 and 7 but their width depends on the width of the column above the first line.

+-----------------------------------+
| 1 |       2      | 3 |      4     |
+-----------------------------------+
| 5 |       6      | 7 |
+-----------------------------------+

是否可以通过此 HTML 代码得到这样的结果，例如第二行的列宽度为 33%？

+-----------------------------------+
| 1 |       2      | 3 |      4     |
+-----------------------------------+
|      5    |      6     |    7     |
+-----------------------------------+

Answer 1

您需要将所需的元素包装在一个单独的 div 中，如果尺寸较大，则使用

display: contents

打开该 div。

在较低的宽度处，我们将包装器移动到第二行，使其全宽，然后应用 Flexbox 并使内容等宽。

.wrap {
  display: contents;
}

[class^="c"] {
  border: 1px solid green;
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: 50px auto 70px 250px repeat(3, 60px);
}

@media screen and (max-width: 1070px) {
  .grid {
    grid-template-columns: 50px auto 70px 250px;
  }
  .grid .wrap {
    grid-column: 1 / -1;
    display: flex;
  }
  .wrap div {
    flex: 1;
  }
}

<div class="grid">
  <div class="c1">1</div>
  <div class="c2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div class="c3">3</div>
  <div class="c4">4</div>
  <div class="wrap">
    <div class="c5">5</div>
    <div class="c6">6</div>
    <div class="c7">7</div>
  </div>
</div>