我有一个网格布局，它有 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