CODEWITHSUNDEEP
css
James Lee
James Lee

Reputation: 926

How do I set minimum and maximum of grid display?

I have a grid that has 5 columns. I want my grid to have maximum of 5 columns of 1fr but if i make my window smaller, i want my columns to be below each other. I noticed this works

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

However, when I increase my window, the grid column goes over by 5. How do i limit my column to be maximum of 5 columns?

Thank you

Upvotes: 0

Views: 46

Answers (1)

Radha
Radha

Reputation: 106

You can use grid-template-columns: repeat(5, minmax(150px, 1fr));

to make responsive on smaller screens and display columns accordingly

  @media (max-width: 540px) {
    #grid {
      grid-template-columns: repeat(1, minmax(150px, 1fr));
    }
  }


  #grid {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(5, minmax(150px, 1fr));
      }

      #areaA {
        background-color: lime;
      }

      #areaB {
        background-color: yellow;
      }
      @media (max-width: 600px) {
        #grid {
          grid-template-columns: repeat(1, minmax(150px, 1fr));
        }
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
   
  </head>
  <body>
    <div id="grid">
      <div id="areaA">A</div>
      <div id="areaB">B</div>
      <div id="areaE">A</div>
      <div id="areaF">B</div>
      <div id="areaG">A</div>
      <div id="areaH">B</div>
      <div id="areaI">A</div>
      <div id="areaJ">B</div>
    </div>
  </body>
</html>

Upvotes: 1

Related Questions