CSS Grid Force number of columns to be odd

Question

I want to create a responsive grid that adds extra columns as the window size increases but so that the total number of columns is always an odd number.

I have found a solution that works in Chrome/Opera/Safari but not in Firefox:

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

Any advice on how to make this work in Firefox?

CodePen: https://codepen.io/andybarefoot/pen/MrOzod?editors=0100

Answer 1

This is a known firefox bug documented on grid bugs with no workaround suggested.

2. Repeat notation should accept a track listing

The repeat() syntax (from the spec) looks like this:

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

The first argument specifies the number of repetitions. The second argument is a track list, which is repeated that number of times.

Firefox can handle a track list in the second parameter of the repeat function, but only if the first parameter is an integer.

e.g. firefox can handle this: grid-template-columns: repeat(3, 200px 100px);

but, if the first parameter is auto-fill or auto-fit - that's the firefox bug.

e.g: firefox fails here: grid-template-columns: repeat(auto-fill, 200px 100px);

---

The workaround: (works on firefox as well)

body {
  background-color: #5F9E9D;
  margin: 0;
}

img {
  max-width: 100%;
}

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

@-moz-document url-prefix() {
  .grid {
    grid-template-columns: repeat(auto-fill, calc(100vw / 3 - 5px));
  }

  @media (min-width: 750px) {
    .grid {
      grid-template-columns: repeat(auto-fill, calc(20vw - 5px));
    }
  }
  @media (min-width: 1050px) {
    .grid {
      grid-template-columns: repeat(auto-fill, calc(100vw / 7 - 5px));
    }
  }
  @media (min-width: 1350px) {
    .grid {
      grid-template-columns: repeat(auto-fill, calc(100vw / 9 - 5px));
    }
  }
}

<div id="grid1" class="grid">
  <div><img src='https://source.unsplash.com/random/250x250?sig=1' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=2' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=3' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=4' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=5' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=6' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=7' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=8' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=9' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=10' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=11' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=12' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=13' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=14' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=15' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=16' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=17' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=18' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=19' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=20' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=21' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=22' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=23' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=24' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=25' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=26' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=27' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=28' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=29' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=30' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=31' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=32' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=33' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=34' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=35' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=36' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=37' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=38' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=39' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=40' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=41' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=42' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=43' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=44' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=45' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=46' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=47' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=48' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=49' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=50' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=51' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=52' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=53' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=54' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=55' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=56' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=57' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=58' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=59' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=60' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=61' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=62' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=63' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=64' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=65' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=66' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=67' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=68' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=69' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=70' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=71' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=72' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=73' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=74' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=75' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=76' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=77' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=78' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=79' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=80' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=81' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=82' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=83' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=84' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=85' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=86' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=87' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=88' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=89' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=90' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=91' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=92' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=93' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=94' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=95' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=96' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=97' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=98' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=99' /></div>
  <div><img src='https://source.unsplash.com/random/250x250?sig=100' /></div>
</div>
<!--
https://unsplash.com/collections/724/
146130
-->

Codepen demo

That being said, a workaround could be to write firefox-only CSS which makes use of media queries to set the grid-template-columns property with a fixed column width in a way that we can ensure an odd number of columns.

I haven't touched the markup, and I have added css which only targets firefox - using this method.

1) Wrap additional CSS for firefox only

@-moz-document url-prefix() {
    /* firefox only code */
} 

2) Since we know that the images are to be displayed in 3,5,7.. columns and each image has a minimum width of 150px - we can generate media queries to create layouts for these columns as well.

.grid {
      grid-template-columns: repeat(auto-fill, calc(100vw / 3 - 5px));
  }


  @media (min-width:750px) { /* 150 * 5 = 750 */
    .grid {
      /* -5px to take the scrollbar into account */
      grid-template-columns: repeat(auto-fill, calc(20vw - 5px)); 
    }
  }

@media (min-width:1050px) { /* 150 * 7 = 1050 */
    .grid {
      grid-template-columns: repeat(auto-fill, calc(100vw / 7 - 5px));
    }
  }

etc...