CSS 网格可以吗？

Question

我希望此部分的 "Next" 按钮在另一个 div 被拿走时全宽。我需要中间的 div 作为同一个容器的一部分，因为我将把它放在平板电脑/桌面媒体查询的中间。

<div class="container">
  <div class="item item--1">Page 1 of 20</div>
  <div class="item item--2">Previous</div>
  <div class="item item--3">Next</div>
</div>
<div class="container" style="margin-top: 40px;">
  <div class="item item--1">Middle</div>
  <div class="item item--2">Next</div>
</div>

.container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.item {
  background: yellow;
  border: 1px solid grey;
  text-align: center;
}

.item--1 {
  text-align: center;
  grid-row: 1;
  grid-column: 1 / span 2;
}

.item--2 {
  grid-row: 2;
  grid-column: 1fr;
}

.item--3 {
  grid-row: 2;
  grid-column: 1fr;
}

https://codepen.io/chrismorrison/pen/xjjwxQ?editors=1100

Answer 1

您可以通过 保留 "Next" div 上的 class（似乎没有什么理由改变它）和当它使用 相邻选择器跟随 "Previous" div 时，以不同的方式定位它。 +

.container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.item {
  background: yellow;
  border: 1px solid grey;
  text-align: center;
}

.item--1 {
  text-align: center;
  grid-row: 1;
  grid-column: 1 / span 2;
}

.item--2 {
  grid-row: 2;
  grid-column: 1;
}

.item--3 {
  grid-row: 2;
  grid-column: 1 / span 2;
}

.item--2 + .item--3 {
  grid-column: 2 / span 1;
}

<div class="container">
  <div class="item item--1">Page 2 of 20</div>
  <div class="item item--2">Previous</div>
  <div class="item item--3">Next</div>
</div>
<div class="container" style="margin-top: 40px;">
  <div class="item item--1">Page 1 of 20</div>
  <div class="item item--3">Next</div>
</div>

坦率地说，更好的解决方案是像这样的 flexbox。这适用于 Previous 和 Next 按钮开箱即用。

.container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px
}

.item {
  background: yellow;
  border: 1px solid grey;
  text-align: center;
}

.item--1 {
  text-align: center;
  flex: 1 0 100%;
}

.item--2,
.item--3 {
  flex: 1;
}

<div class="container">
  <div class="item item--1">Page 1 of 20</div>
  <div class="item item--3">Next</div>
</div>

<div class="container">
  <div class="item item--1">Page 2 of 20</div>
  <div class="item item--2">Previous</div>
  <div class="item item--3">Next</div>
</div>

<div class="container">
  <div class="item item--1">Page 20 of 20</div>
  <div class="item item--2">Previous</div>
</div>

CSS 网格可以吗？

Is this possible with CSS Grid?

html

css

grid

layout

css-grid