CSS 桌面版和移动版的不同网格

Question

I have a grid layout, which has 7 columns and 5 rows, defined by following CSS:我有一个网格布局，它有 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;

}

I have to rearrange its cells for mobile version and if I have same numbers of cells, it could be done without any JavaScript coding just we a simple CSS trick (see attached code snippet), where I have redesigned layout for mobile devices and put LF/RF cells down.我必须为移动版本重新排列它的单元格，如果我有相同数量的单元格，它可以在没有任何 JavaScript 编码的情况下完成，只是我们一个简单的 CSS 技巧（请参阅附加的代码片段），我已经为移动设备重新设计了布局并放置了 LF /RF 细胞下降。

But, what if I couldn't keep the same number of cells?但是，如果我不能保持相同数量的细胞怎么办？

What if, desktop grid would have additional 4 offset cells (magenta ones)如果，桌面网格会有额外的 4 个偏移单元格（洋红色的）怎么办？

So, is it possible to switch between desktop and mobile layouts if they don't have even number of cells, but same # of grids and rows.那么，如果它们没有偶数个单元格但相同的网格和行数，是否可以在桌面和移动布局之间切换。 Without using JavaScript, just HTML/CSS stack.不使用 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

Answer 1

Sure, I have to hide extra desktop cells by当然，我必须隐藏额外的桌面单元格

display: none;

 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; }.desk1 { grid-area: 2 / 1 / 3 / 2; background-color: orange; }.ltotal { grid-area: 2 / 2 / 3 / 4; background-color:burlywood; }.c2 { grid-area: 2 / 4 / 3 / 5; background-color: darkgray; }.rtotal { grid-area: 2 / 5 / 3 / 7; background-color:burlywood; }.desk2 { grid-area: 2 / 7 / 3 / 8; background-color: orange; }.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;}.desk3 { grid-area: 4 / 1 / 5 / 2; background-color: orange; }.lui { grid-area: 4 / 2 / 5 / 4; background-color: aqua; }.cui { grid-area: 4 / 4 / 5 / 5; background-color: aquamarine; }.rui { grid-area: 4 / 5 / 5 / 7; background-color: aqua; }.desk4 { grid-area: 4 / 7 / 5 / 8; background-color: orange; }.pholder { grid-area: 5 / 1 / 6 / 8; background-color: darkgrey; } @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; }.desk1 { display: none; }.desk2 { display: none; }.desk3 { display: none; }.desk4 { display: none; } }

 <.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="desk1"></div> <div class="ltotal">LTOTAL</div> <div class="c2">C2</div> <div class="rtotal">RTOTAL</div> <div class="desk2"></div> <div class="lf">LF</div> <div class="d3">D3</div> <div class="rf">RF</div> <div class="desk3"></div> <div class="lui">LUI</div> <div class="cui">CUI</div> <div class="rui">RUI</div> <div class="desk4"></div> <div class="pholder">PHOLDER</div> </div> </body> </html

CSS 桌面版和移动版的不同网格

问题描述

1 个解决方案

解决方案1
0 2020-04-24 09:47:38

CSS 桌面版和移动版的不同网格

问题描述

1 个解决方案

解决方案1 0 2020-04-24 09:47:38

解决方案1
0 2020-04-24 09:47:38