CSS Различные сетки для настольной и мобильной версии - PullRequest
0 голосов
/ 24 апреля 2020

У меня есть сетка с 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;

}

enter image description here

У меня есть переставить его ячейки для мобильной версии, и если у меня одинаковое количество ячеек, это можно сделать без какого-либо кодирования JavaScript, просто мы сделаем простой трюк CSS (см. прилагаемый фрагмент кода), где я изменил макет для мобильных устройств и положить LF / RF ячейки вниз.

Но что, если я не смогу сохранить одинаковое количество ячеек?

Что если настольная сетка будет иметь дополнительные 4 ячейки смещения (пурпурные)

enter image description here

Итак, можно ли переключаться между настольным и мобильным макетами, если у них нет четного числа ячеек, но такое же количество сеток и строк , Без использования 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

1 Ответ

0 голосов
/ 24 апреля 2020

Конечно, я должен скрыть дополнительные ячейки рабочего стола на

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
...