网格：力单元格宽度与第二行无关-解网

问：

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

[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（不是我想要的）：我在单元格 5、6 和 7 中有一个换行符，但它们的宽度取决于第一行上方列的宽度。

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

例如，从这个 HTML 代码中，是否可以得到这个结果，例如第二行列的宽度为 33%？

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

HTML 弹性框 CSS-网格

.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>

网格：力单元格宽度与第二行无关

Grid : force cell width of second row independant

评论

评论