-1

I am having trouble making my CSS Grid items go "full width" on mobile because I don't know how many columns there will be:

https://codepen.io/matthewfelgate/pen/Kvqdmp?editors=1100

* { outline: 1px dashed red; }
.box {
  display: grid;
  &__heading, &__text { padding: 1em; }
  @media ( max-width: 800px ) {

  }
  @media ( min-width: 801px ) {
    &__heading {
      grid-row: 1;
    }
    &__text {
      grid-column-start: 1;
      grid-column-end: -1;
    }    
  }
 
}
<div class="box">

  <div class="box__heading">Heading 1</div>
  <div class="box__text">Text 1</div>

  <div class="box__heading">Heading 2</div>
  <div class="box__text">Text 2</div>

  <div class="box__heading">Heading 3</div>
  <div class="box__text">Text 3</div>

  <div class="box__heading">Heading 4</div>
  <div class="box__text">Text 4</div>

</div>

grid-column-end: -1; doesn't seem to work?

Edit: Don is right, I got the media queries round the wrong way. I am trying to do Tabs on Desktop and Accordion on Mobile.

Matthew Felgate
  • 166
  • 12
  • 1
    `grid-column-end: -1` only works on *explicit* grids. In other words, the number of columns is defined. Since you're working with an *implicit* grid (the container adds columns automatically), the negative integer method is invalid ([source](https://stackoverflow.com/a/44053668/3597276)). – Michael Benjamin Aug 10 '17 at 16:43
  • There doesn't seem to be a good answer for this (yet). A [**similar question**](https://stackoverflow.com/q/44052336/3597276) has an accepted answer which suggests setting a column to span a huge number of columns. In my view, that's a terrible solution, which may not even work in some browsers (because they will actually render all the tracks). But based on the upvotes, some people have found it useful. – Michael Benjamin Aug 10 '17 at 16:43
  • 1
    This example is pretty confusing because as the page gets smaller you're adding *more* content horizontally, do you have the examples backwards? I'm very confused what you're trying to achieve. – Don Aug 10 '17 at 16:51

2 Answers2

1

Would flex work for your needs?

.box {
  display: flex;
  flex-direction: column;
  &__heading, &__text { padding: 1em; }
}
Christopher Messer
  • 2,040
  • 9
  • 13
1

Ah this guy has found a solution!

https://codepen.io/thinsoldier/pen/ZJyXzq?editors=1100

Using: 

  grid-template-columns: repeat(auto-fill,minmax(100px,auto));
Matthew Felgate
  • 166
  • 12