У меня есть сетка с 7 столбцами и 5 строками, определяемая следующим образом: CSS:
.container {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: 100vw;
height: 100vh;
}
У меня есть переставить его ячейки для мобильной версии, и если у меня одинаковое количество ячеек, это можно сделать без какого-либо кодирования JavaScript, просто мы сделаем простой трюк CSS (см. прилагаемый фрагмент кода), где я изменил макет для мобильных устройств и положить LF / RF ячейки вниз.
Но что, если я не смогу сохранить одинаковое количество ячеек?
Что если настольная сетка будет иметь дополнительные 4 ячейки смещения (пурпурные)
Итак, можно ли переключаться между настольным и мобильным макетами, если у них нет четного числа ячеек, но такое же количество сеток и строк , Без использования JavaScript, только стек HTML / CSS.
body {margin: 0; }
.container {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: 100vw;
height: 100vh;
}
/*desktop*/
.l1 { grid-area: 1 / 1 / 2 / 3; background-color: aqua; }
.c1 { grid-area: 1 / 3 / 2 / 6; background-color: aquamarine; }
.r1 { grid-area: 1 / 6 / 2 / 8; background-color: aqua; }
.ltotal { grid-area: 2 / 1 / 3 / 4; background-color:burlywood; }
.c2{ grid-area: 2 / 4 / 3 / 5; background-color: darkgray; }
.rtotal { grid-area: 2 / 5 / 3 / 8; background-color:burlywood; }
.lf { grid-area: 3 / 1 / 4 / 2; background-color: brown; }
.d3 { grid-area: 3 / 2 / 4 / 7; background-color: cadetblue; }
.rf { grid-area: 3 / 7 / 4 / 8; background-color: blueviolet; }
.lui { grid-area: 4 / 1 / 5 / 4; background-color: aqua; }
.cui { grid-area: 4 / 4 / 5 / 5; background-color: aquamarine; }
.rui { grid-area: 4 / 5 / 5 / 8; background-color: aqua; }
.pholder { grid-area: 5 / 1 / 6 / 8; background-color: darkgray; }
@media only screen and (max-width: 600px) {
.l1 { grid-area: 1 / 1 / 2 / 3; }
.c1 { grid-area: 1 / 3 / 2 / 6; }
.r1 { grid-area: 1 / 6 / 2 / 8; }
.ltotal { grid-area: 2 / 1 / 3 / 4; }
.c2 { grid-area: 2 / 4 / 3 / 5; }
.rtotal { grid-area: 2 / 5 / 3 / 8; }
.d3 { grid-area: 3 / 1 / 4 / 8; }
.lui { grid-area: 4 / 1 / 5 / 4; }
.cui { grid-area: 4 / 4 / 5 / 5; }
.rui { grid-area: 4 / 5 / 5 / 8; }
.lf { grid-area: 5 / 1 / 6 / 4; }
.pholder { grid-area: 5 / 4 / 6 / 5; }
.rf { grid-area: 5 / 5 / 6 / 8; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Desktop vs. Mobile Grid</title>
</head>
<body>
<div class="container">
<div class="l1">L1</div>
<div class="c1">C1</div>
<div class="r1">R1</div>
<div class="ltotal">LTOTAL</div>
<div class="c2">C2</div>
<div class="rtotal">RTOTAL</div>
<div class="lf">LF</div>
<div class="d3">D3</div>
<div class="rf">RF</div>
<div class="lui">LUI</div>
<div class="cui">CUI</div>
<div class="rui">RUI</div>
<div class="pholder">PHOLDER</div>
</div>
</body>
</html