My CSS grid has grid items that can easily be centered in Chrome by using the justify-items:center property, creating a magical effect. However, this solution does not work in Internet Explorer as the items remain stuck to the left side.
For reference: https://codepen.io/anon/pen/jjgmNX
Here is the HTML structure:
<div class="grid-container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
</div>
And here is the corresponding CSS code:
.grid-container {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 20px;
justify-items: center;
}
.item-1 {
background-color: rgba(200,520,266,.75);
border-color: #b4b4b4;
grid-column: 1;
grid-row: 1;
}
.item-2 {
background-color: rgba(145,520,0,.75);
grid-gap: 20px;
}
.item-3 {
background-color: rgba(145,520,0,.75);
grid-column: 3;
grid-row: 1;
}
.item-4 {
background-color: rgba(0,0,0,.25);
border-color: transparent;
grid-column: 2;
grid-row: 2;
}
I am seeking a method to center the child divs in both IE and Chrome without any compatibility issues. How can I achieve this?