CSS grid: Responsive grid according to screen sizes

Question

Here's what I'd like to achieve:

On mobile

On tablet/iPad and desktop

Here's what I have so far.

article {
    display: grid;
    height: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    justify-items: center;
    align-items:center;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 50%;
}

section img {
  max-width: 4rem;
}

<article>
  <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
    <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
    <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
    <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
    <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
    <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
      <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
      <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
      <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
</article>

How do I make sure it stays 5 columns (or however it is maybe more in the future or less) on desktop and ipad and have it fixed to 3 columns when it goes to mobile screens?

I'd like a smooth transition between screens, so no dodgy jumping in between screen sizes. Suggestions/help would be greatly appreciated!

related: https://stackoverflow.com/q/54927180/8620333 – Temani Afif Nov 27 '19 at 13:30 — Temani Afif, Nov 27 '19 at 13:30

score 0 · Answer 1 · answered Nov 27 '19 at 13:51

Just create a different grid-template-columns definition for small-screen devices:

article {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media screen and (max-width: 480px) {
  article {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

I'd like a smooth transition between screens, so no dodgy jumping in between screen sizes.

This would depend on how the browser handles this. For a guaranteed smoother solution you will have to resort to a Javascript-based solution (which is probably complex and, imo, not worth it).

CSS grid: Responsive grid according to screen sizes

1 Answers1