Kevin Powell - Community•12mo ago

Responsive Grid

I wanted to make two different grid between mobile and desktop screens. What I want is the following: On lg: a b c d e On smallest mobile: a b e c d Basically one full row on lg and two columns on mobile with last item on second column. I am trying grid-area for this but it seems to jumble around on mobile.

.wrapper {
  grid-template-columns: 1fr 1fr 1fr 0.5fr auto
  grid-template-areas: "a b c d e"
}

on mobile
.wrapper {
  grid-template-columns: 1fr auto
  grid-template-areas: "a e" "b" "c" "d"
}

.wrapper {
  grid-template-columns: 1fr 1fr 1fr 0.5fr auto
  grid-template-areas: "a b c d e"
}

on mobile
.wrapper {
  grid-template-columns: 1fr auto
  grid-template-areas: "a e" "b" "c" "d"
}

Edit: code Edit 2: Code is originally in chakra-ui but gist of styling is what's shown.

5 Replies

Jochem•12mo ago

Share your code

Ontex•12mo ago

Edited post

dysbulic 🐙•12mo ago

grid-template-areas: "a e" "b e" "c e" "d e", maybe?

Å Marlon G•12mo ago

What do you want to happen to columns a to d if not on the smallest device, but not on the largest either? In short – should this be fluid or is there a hard transition with media queries?

Ontex•12mo ago

Oh, it worked with adding e on every row on 2nd column on the grid-template-areas. Still not sure why it made a jumbled mess with only e on the first row 2nd column, but thanks!

Gaming

Programming

Responsive Grid