Is this possible with CSS Grid?

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

Hi, the bottom section. The top section is how it should look when there are both next and previous buttons. However when there is only one next button I would like this to go full width rather than half. — Chris, May 11 '18 at 10:33
I suggest having a look at this https://stackoverflow.com/questions/45070481/make-a-row-stretch-across-all-columns-in-css-grid — JamesS, May 11 '18 at 10:40

Paulie_D · Accepted Answer · 2018-05-11T12:49:54.517

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>

Amazing, thank you! However, I would need it to work with the Previous button as well exactly the same way you have worked it out for the Next button. I hadn't thought of using the adjacent selector, would this be possible? — Chris, May 11 '18 at 12:19
I kinds figured that would be the next question...and no. Personally I'd use flexbox. I'll amend the answer. — Paulie_D, May 11 '18 at 12:47
Thank you so much for your help! I wanted to use grid because the page number would sit between the buttons on a larger media query, and would work without using negative margins for two rows. I possibly could do this with flex but it might be more complicated. I've updated the CodePen link. — Chris, May 11 '18 at 13:49
That may not be as much of an issue as you might think, dont forget you can change the order of elements with flexbox. - https://codepen.io/Paulie-D/pen/XqqRaa — Paulie_D, May 11 '18 at 14:34
True, I've stuck with my code for now as the rest of what I'm working on just now is using it. Thanks a lot for your help. — Chris, May 12 '18 at 18:58

Is this possible with CSS Grid?

1 Answers1