0

I have the following layout on my website

.container{
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-template-rows: max-content;
}

.item{
  background: red;
  border: 1px solid black;
  height: 350px;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

basically some cards that scale according to device width so there could be 1 card on each row or 10 cards on a row, and they wrap accordingly at the bottom (stay the same width) as shown in my snippet

Now this works great except in IE11 (I dont have to support any previous versions). What are my options here? Am I able to do anything similar with flexbox? I know I could specify the widths of each card and have a bunch of media queries.. but I'd rather not.. hoping for a better solution.

EDIT

So after a quick play around I was able to come up with a similar solution..

.container{
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
}

.item{
  background: red;
  border: 1px solid black;
  height: 350px;
  flex: 1;
  min-width: 350px;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

but as you can see the last items in the row stretch the entire width of the row when I want them to stay the same width as the rest of the cards, I know that the min-width of the card should be 350px - but the max-width could be as much as the screen allows before it wraps so I cant specify max-width

EDIT 2

this post here mentions using a psuedo element like so 

.container::after{
  content: '';
  flex: auto;
}

but it doesnt really work now I have seen some solutions that rely on the width of the browser, but I have a collapsable sidebar that alters the width of that parent container so I am unable to rely on the screen width.. which is why that grid solution was so good

EDIT

I was able to create a real hacky fix by just adding extra 'invisible' items with the same flex: 1 and a height: 0

Smokey Dawson
  • 8,827
  • 19
  • 77
  • 152

2 Answers2

1

I try to test your example with IE 11 and made some tests with it.

Than I try to set flex like this flex: flex: 0 0 33.3333%;; in item class make it work in IE 11.

Modified code:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.container{
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;

}

.item{
  background: red;
  border: 1px solid black;
  height: 350px;
  flex: flex: 0 0 33.3333%;;

  min-width: 350px;

}
</style>
</head>
<body>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

</body>
</html>

Output in IE 11:

enter image description here

Deepak-MSFT
  • 10,379
  • 1
  • 12
  • 19
  • unfortunately this does not work as expected since I want the squares to fill up the full width of the browser (notice the gap you have shown between the last red box in the top row) – Smokey Dawson Sep 12 '19 at 22:16
-1

Have you checked this

Use the -ms-grid-row and -ms-grid-column properties.

CSS Grid auto placement in IE/EDGE CSS Grid not working in ie11 despite prefixes https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#automatic-placement-of-grid-items

CSS Grid Layout not working in IE11 even with prefixes May help you

Arun
  • 1,177
  • 9
  • 15