Добрый день.
Имеется блок grid:
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="conteiner">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
*{
margin: 0;
padding: 0;
}
.conteiner{
border: grey 3px solid;
margin: 0 auto;
display: -ms-grid;
display: grid;
grid-template: auto / auto auto auto;
width: 900px;
height: 700px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
justify-items: center;
-ms-flex-line-pack: center;
align-content: center;
}
.item{
margin: 15px;
width: 200px;
height: 200px;
background: green;
}
.item:nth-child(1) {
-ms-grid-column: end;
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.item:nth-child(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
.item:nth-child(3) {
-ms-grid-column: 3;
-ms-grid-row: 1;
}
.item:nth-child(4) {
-ms-grid-column: 1;
-ms-grid-row: 2;
}
.item:nth-child(5) {
-ms-grid-column: 2;
-ms-grid-row: 2;
}
.item:nth-child(6) {
-ms-grid-column: 3;
-ms-grid-row: 2;
}
Знаю, что для нормального поведения grid в браузере IE нужно указывать позицию каждого элемента сетки. Это работает.
Но вот как выровнять элементы по осям в IE?
В остальных браузерах всё работает
Прошу помощи. Спасибо
Простой
