Is this possible with CSS Grid? - html

Question

I want the "Next" button of this section to go full width when the other div has been taken away. I need the middle div to stay as part of the same container as I will be putting this in the middle in a media query for tablet / desktop.
<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

You can do this by retaining the class on the "Next" div (there seems little reason to change it) and the targeting it differently when it follows the "Previous" div using the adjacent selector. +
.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>
Frankly, a better solution would be flexbox like so. This works with both Previous and Next buttons out of the box.
.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>