Я должен изменить свою CSS-сетку на табличный макет CSS. Как одиночные, так и адаптивные CSS будут работать нормально, но объединение их в своего рода безопасную команду кажется мне слишком сложным.
Может кто-нибудь проверить, что я пропустил в "@supports"? Я пытался изменить обертки / переписать правила сетки с правилами моего запасного варианта, но результат пока не тот, который я хочу.
<style type="text/css">
html {box-sizing: border-box;
}
.wrapper-of-wrapper {
position: fixed;
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
.wrapper {
height: auto;
display: grid;
-ms-grid;
-ms-grid-columns: 16% 16% 16%;
-ms-grid-rows: 10% 10% 10%;
flex: 0;
grid-column-gap: 7px;
grid-row-gap: 7px;
grid-template-columns: 16% 16% 16%;
justify-content: center; /*horizontal*/
align-content: center; /*vertical*/
grid-auto-flow: row dense;
}
.box
{justify-content: center;
align-items: center;
background: grey;
}
img {max-width: 90%;
height: auto;
margin: 5px;
}
.a {grid-column: 1 / span 2;
grid-row: 1 / span 2; border: 5px solid red;}
.b {grid-column: 3; grid-row: 1}
.c {grid-column: 3; grid-row: 2}
.d {grid-column: 1; grid-row: 3}
.e {grid-column: 2; grid-row: 3}
.f {grid-column: 3; grid-row: 3}
@media only screen and (max-width: 600px)
{/*some definitions*/ }
@supports not (display: grid) {
.wrapper-of-wrapper {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: table !important;
position: relative !important;
table-layout: fixed !important;
border: 2px solid blue;
}
.a {display: table-cell !important;
position: relative !important;
vertical-align: middle!important;
max-width: 80% !important;
max-height: auto !important;
margin: auto !important;
border: 2px solid red;
}
#A {position: relative !important;
vertical-align: middle !important;
max-width: 30% !important;
border: 0px solid;
margin: 8px !important;
max-width: 600px !important;
max-height: 400px !important;
width: 65% !important;
height: auto !important;
}
.b {display: none;}
.c {display: none;}
.d {display: none;}
.e {display: none;}
.f {display: none;}
@media only screen and (max-width: 600px)
{/*some definitions*/ }
}
</style>
<body>
<!-- - - - - - - - - - -->
<div class="wrapper-of-wrapper">
<div class="wrapper">
<div class="box a" id="A">
<img style="border 2px solid red" src="http://via.placeholder.com/350x200">
</div>
<div class="box b" id="B">
<img src="http://via.placeholder.com/170x100">
</div>
<div class="box c" id="C">
<img src="http://via.placeholder.com/170x100">
</div>
<div class="box d" id="D">
<img src="http://via.placeholder.com/170x100">
</div>
<div class="box e" id="E">
<img src="http://via.placeholder.com/170x100">
</div>
<div class="box f" id="F">
<img src="http://via.placeholder.com/170x100">
</div>
<!-- - -- - - - - - - - - -->
</body>