Kevin Powell - Community•7mo ago

Wrap grid columns with grid area

See the below JSFiddle, I would like to have the items inside the grid container stack on top of each other automatically at 480px. If you wonder why the heck I would use CSS grid here with the 12 columns, I am creating a website builder app and it basically needs to replicate the drag and drop grid interface. Otherwise I could just use flex box with space between here of course. Thanks in advance. https://jsfiddle.net/Lbof2nxk/42/

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

4 Replies

BowserOP•7mo ago

bump

Enrique•7mo ago

@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
  
  header img, header div {
    grid-area: auto;
  }
}

@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
  
  header img, header div {
    grid-area: auto;
  }
}

If you want to have the items on top each other below 480px, you have to change the amount of columns. By setting 'grid-template-columns' to '1fr' it essentially creates a one-column layout. For the items inside the grid-container (header) you have to set the 'grid-area' property to its initial value which is 'auto'. In that way you reset their position in the grid.

ἔρως•7mo ago

how about you swap the order? only apply the grid after 480px? the natural state of stuff is to stack on top of eachother

BowserOP•7mo ago

both good approaches thx

Gaming

Programming

Wrap grid columns with grid area