Cannot get grid to align properly in IE11

Question

I am having issues getting a grid to display correctly on IE. I want to avoid autoprefixers and need something simple. I hope it's something that I missed. I have the following CSS code:

.container {
  padding: 20px;
  display: grid;
  display: -ms-grid;
  grid-template-columns: [colstart] min-content [col1] 1fr [colend];
  grid-template-rows: [rowstart] 0fr [row1] 1fr [rowend];
  -ms-grid-columns: min-content 1fr;
  -ms-grid-rows: 0fr 1fr;
}

.image {
  grid-column: colstart/col1;
  grid-row: rowstart/rowend;
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}

.header {
  grid-column: col1/colend;
  grid-row: rowstart/row1;
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}

.text {
  grid-column: col1/colend;
  grid-row: row1/rowend;
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}

and the following HTML:

<div class="container">
    <div class="image">
       // ...image
    </div>
    <div class="header">
       <h3>{data.title}</h3>
       <div class="social">
           // ...social icon
       </div>
    </div>
    <div class="text">
       // ...text
    </div>
</div>

Everything except the text is displaying correct. The text div is overlapping the header div when I want it to display underneath.

This is how I really want it:

Have you reviewed this post? https://stackoverflow.com/q/45786788/3597276 — Michael Benjamin, Apr 16 '20 at 18:08
Grid has very limited support in IE: https://caniuse.com/#search=display%20grid so you will need to use any prefixes you can to make it work. This article, second in the series, should prove to be very helpful to you: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/ — Nathaniel Flick, Apr 16 '20 at 18:14
@Nathanial Flick. Is there a way to do this layout with anything else? Flex? everything else is too complicated and takes too much time. — Storm Parker, Apr 16 '20 at 18:37
@StormParker For IE you'll need to use either fallbacks or floats, I reckon. But there are also unordered lists which can work nicely. — Nathaniel Flick, Apr 16 '20 at 18:51
@NathanielFlick Unordered Lists? I can't really imagine that right now. — Storm Parker, Apr 16 '20 at 19:03
@StormParker Hi you can use percentage columns for the image left and text right, and in the text right column you can do an unordered list to manage the items, use list-style: none to get rid of the list styling. You can also use unordered list to manage items inline like icons. Easiest thing here might be a float fallback that gets overriden by your display grid in newer browsers. — Nathaniel Flick, Apr 19 '20 at 18:27

score 0 · Answer 1 · answered Apr 17 '20 at 02:47

I tried to test the issue and I am able to produce the issue with your sample code.

I try to refer to some articles and try to develop one example using a grid that looks similar to the output you posted above. It also looks similar in other browsers.

Example code:

<!doctype html>
<html>
<head>
<style>
body {
  margin: 40px;
}

.wrapper {
  display: -ms-grid;
  display: grid; 
  -ms-grid-columns: [colstart] min-content [col1] 1fr [colend];
  grid-template-columns: [rowstart] 0fr [row1] 1fr [rowend];
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
 
  padding: 20px;
  font-size: 100%;
}

.a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.b {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.title
{
width:70%;
float:left;
height:60px;

}
.social
{
margin-left:30%;
padding-top:20px;
height:60px;
}

</style>
</head>
<body>
<div class="wrapper">
  <div class="box a"> <div class="image">
       <img src="https://i.postimg.cc/9QD1fcWq/icons8-user-100.png" height="200px" width="200px"></img>
    </div></div>
  <div class="box b"> 
 <div class="title"><h2>FN LN abc</h2></div>
       <div class="social">
           <img src="https://i.postimg.cc/43TtTGnG/twitter-icon.png"></img>
          <img src="https://i.postimg.cc/mZFHhhM4/fb-icon.png"></img>
           <img src="https://i.postimg.cc/43TtTGnG/twitter-icon.png"></img></div>
  
     
 Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
 Test Test Test Test Test Test Test Test  </div>
</body>
</html>

Output in IE 11 and Google Chrome browser:

Further, you can try to modify this sample code as per your requirements.

Cannot get grid to align properly in IE11

1 Answers1