Возможно ли это с помощью CSS Grid? - PullRequest
Новая
       31

Возможно ли это с помощью CSS Grid?

0 голосов
/ 11 мая 2018

Я хочу, чтобы кнопка «Далее» в этом разделе стала полной ширины, когда другой 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

1 Ответ

0 голосов
/ 11 мая 2018

Вы можете сделать это, сохранив класс в div "Next" (кажется, нет причин менять его) и нацелив его по-другому, когда он следует за div "Previous", используя соседний селектор. + 

.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.Это работает с кнопками «Назад» и «Далее» из коробки . 

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