5 replies

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

a b c d e

a b c d e

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

grid-area

grid-area

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"
}

.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.

Responsive Grid

Similar Threads

Similar Threads

Similar Threads