CODEWITHSUNDEEP
htmlcsscss-grid
OortCloud21
OortCloud21

Reputation: 123

Why are CSS Grid's auto-fit columns not collapsing in mobile view?

I'm trying to get the CSS Grid to have a flexible number of columns depending on the size of the viewport it's being displayed in, it should range from 1 column to up to 4 columns.

If I preview this code in a desktop browser and resize the window to narrower boundaries, the columns collapse until there is only one column left, as expected. However when I navigate to this page on my phone there are still three columns visible. Furthermore, if I use the browser's dev console (I'm on Chrome) and switch to mobile view, then try different mobile resolutions, the columns remain fixed, neither expanding nor collapsing. The whole view just gets scaled.

This is the most barebones code I could come up with that reproduces the issue: (Note: In this snippet the code works as expected, however if you copy it into a stand-alone .html file it stops working)

<style>
  .center_page {
    width: 70%;
    margin: auto;
  }
  
  .FlexibleGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1em;
  }
  
  .GridItem {
    display: flex;
    border: 1px solid;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
</style>

<div class="center_page">

  <div class="FlexibleGrid">

    <div class="GridItem">
      test
    </div>

    <div class="GridItem">
      test
    </div>

    <div class="GridItem">
      test
    </div>

    <div class="GridItem">
      test
    </div>

    <div class="GridItem">
      test
    </div>


  </div>

</div>

Upvotes: 3

Views: 526

Answers (1)

Sana Mumtaz
Sana Mumtaz

Reputation: 833

Kindly add the following in <head> tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Upvotes: 3

Related Questions