0

I have created a masonry style grid in HTML/CSS. To do this I have used the

display:grid properties with 'grid-row' and 'grid-column.'

See attached pen.

This works great in Chrome, Firefox and Edge, not tried on Safari yet, but unfortunately, there are issues when it renders in the IE 11 browser. Instead of getting a nice grid layout as shown in the attached pen it just displays 4 1x1 columns on top of one another.

Are there any IE specific properties that I can assign to my CSS classes in order to get this to display correctly across all browsers?

#container {
  display:inline-block;
  overflow: hidden;            /* clip the excess when child gets bigger than parent */
}
#container img {
  display: block;
  transition: transform .4s;   /* smoother zoom */
}
#container:hover img {
  transform: scale(1.3);
  transform-origin: 50% 50%;
}
.wrapper {
display: grid;
grid-gap: 0px;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 400px 400px;
color: #000;
}

.a {
grid-column: 1;
grid-row: 1/3;
text-align:center;
color:#fff;
display:block;
position:relative;
overflow:hidden;
}

.b {
grid-column: 2 / span 2;
grid-row: 1;
color:#fff;
position:relative;
overflow:hidden;
}

.c { 
grid-column: 2;
grid-row: 2;
color:#fff;
position:relative;
overflow:hidden;
}

.d { 
grid-column: 3;
grid-row: 2;
color:#fff;
position:relative;
overflow:hidden;
}



.box {
border-radius: 0px;
padding: 10px;
font-size: 150%; 
display:block;
position:relative;
}

.ctr {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}
  
 .imex-btn {
  background-color: #4080fa;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 70px;
  cursor: pointer;
  font-family: "Century Gothic";
 }

.imex-btn:hover {
background-color: #000;
color: #4080fa;
}
    
    
<div class="wrapper">
  <div class="box a">
    <div id="container">
    <img id="image" src="https://via.placeholder.com/500x900
C/O https://placeholder.com/">
    <div class="ctr"><h2 class="white">BOX A<h2>
</div>
<a href="#" class="ctr imex-btn">VIEW NOW</a>
    </div>
  </div>
  <div class="box b">
    <div id="container">
    <img id="image" src="https://via.placeholder.com/1200x900/C/O https://placeholder.com/">
   <div class="ctr"><h2 class="white">BOX B</h2>
</div>
<a href="#" class="ctr imex-btn">VIEW NOW</a>
   </div>
  </div>
   <div class="box c">
    <div id="container">
    <img id="image" src="https://via.placeholder.com/500x500
C/O https://placeholder.com/">
    <div class="ctr"><h2 class="white" style="text-align:center">BOX C</h2>
</div>
<a href="#" class="ctr imex-btn">READ MORE</a>
    </div>
  </div>
   <div class="box d">
    <div id="container">
    <img id="image" src="https://via.placeholder.com/500x500
C/O https://placeholder.com/">
    <div class="ctr"><h2 class="white" style="text-align:center">BOX D</h2>
</div>
<a href="#" class="ctr imex-btn">READ MORE</a>
    </div>
  </div>

  
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Chris
  • 199
  • 2
  • 6
  • 19

3 Answers3

1

Try to change the CSS from

grid-template-columns: 33% 33% 33%;

To

grid-template-columns: 1fr 1fr 1fr;

Derrick Brinkworth
  • 89
  • 7
1

Some elements are not properly rendered on IE11 due to their implementation of the standards. Try adding a -ms- prefix to elements such as display: grid, grid-column and grid-row.

You will probably face the same kind of problems when testing on older versions of Safari (in which case try the -webkit prefix).

mrbear258
  • 46
  • 4
1

I've added some css to make it work in IE. Pay attention to the -ms- prefix added in css. You can also refer to this article which explains how to support css grid in IE.

#container {
            display: inline-block;
            overflow: hidden; /* clip the excess when child gets bigger than parent */
        }

            #container img {
                display: block;
                transition: transform .4s; /* smoother zoom */
            }

            #container:hover img {
                transform: scale(1.3);
                transform-origin: 50% 50%;
            }

        .wrapper {
            display: -ms-grid;
            display: grid;
            grid-gap: 0px;
            grid-template-columns: 33% 33% 33%;
            -ms-grid-columns: 33% 33% 33%;
            grid-template-rows: 400px 400px;
            -ms-grid-rows: 400px 400px;
            color: #000;
        }

        .a {
            grid-column: 1;
            grid-row: 1/3;
            -ms-grid-column: 1;
            -ms-grid-row-span: 2;
            text-align: center;
            color: #fff;
            display: block;
            position: relative;
            overflow: hidden;
        }

        .b {
            grid-column: 2 / span 2;
            grid-row: 1;
            -ms-grid-row:1;
            -ms-grid-column-span: 2;
            -ms-grid-column:2;
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .c {
            grid-column: 2;
            grid-row: 2;
            -ms-grid-column:2;
            -ms-grid-row:2;
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .d {
            grid-column: 3;
            grid-row: 2;
            -ms-grid-column:3;
            -ms-grid-row:2;
            color: #fff;
            position: relative;
            overflow: hidden;
        }



        .box {
            border-radius: 0px;
            padding: 10px;
            font-size: 150%;
            display: block;
            position: relative;
        }

        .ctr {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%)
        }

        .imex-btn {
            background-color: #4080fa;
            border: none;
            color: white;
            padding: 10px 30px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin-top: 70px;
            cursor: pointer;
            font-family: "Century Gothic";
        }

            .imex-btn:hover {
                background-color: #000;
                color: #4080fa;
            }
<div class="wrapper">
        <div class="box a">
            <div id="container">
                <img id="image" src="https://via.placeholder.com/500x900
C/O https://placeholder.com/">
                <div class="ctr">
                    <h2 class="white">BOX A</h2>
                </div>
                <a href="#" class="ctr imex-btn">VIEW NOW</a>
            </div>
        </div>
        <div class="box b">
            <div id="container">
                <img id="image" src="https://via.placeholder.com/1200x900/C/O https://placeholder.com/">
                <div class="ctr">
                    <h2 class="white">BOX B</h2>
                </div>
                <a href="#" class="ctr imex-btn">VIEW NOW</a>
            </div>
        </div>
        <div class="box c">
            <div id="container">
                <img id="image" src="https://via.placeholder.com/500x500
C/O https://placeholder.com/">
                <div class="ctr">
                    <h2 class="white" style="text-align:center">BOX C</h2>
                </div>
                <a href="#" class="ctr imex-btn">READ MORE</a>
            </div>
        </div>
        <div class="box d">
            <div id="container">
                <img id="image" src="https://via.placeholder.com/500x500
C/O https://placeholder.com/">
                <div class="ctr">
                    <h2 class="white" style="text-align:center">BOX D</h2>
                </div>
                <a href="#" class="ctr imex-btn">READ MORE</a>
            </div>
        </div>
    </div>
Yu Zhou
  • 11,532
  • 1
  • 8
  • 22