Добавить новые подогнанные строки на основе ширины столбца? - PullRequest
Новая
       16

Добавить новые подогнанные строки на основе ширины столбца?

0 голосов
/ 17 сентября 2018

У меня есть этот код, где есть просто один столбец с тремя различными строками, вписанными в область просмотра.Каждая строка будет содержать изображение, которое соответствует по высоте.Я хочу сделать так, чтобы, если размер браузера был изменен по горизонтали, а ширина этого столбца (область просмотра) упала ниже определенной точки, дополнительные страницы затем вставляются на страницу, которая также соответствует области просмотра.Таким образом, он будет привязан к подгонке трех рядов к подгонке четырех рядов, затем пяти и т. Д., В зависимости от ширины одного столбца / области просмотра: 

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <title>TEST SITE ONE</title>
    <meta name="description" content="Test Site">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="main.css">

    <style>

        html {
          box-sizing: border-box;
        }

        *, *:before, *:after {
          box-sizing: inherit;
        }

        * {
            margin: 0px;
            padding: 0px;
        }

        body{
        display: block;
        }

        #page1{
            background-color: aquamarine;
            display: block;
            width: 100vw;
            height: 100vh;
            max-width: 100%;
            max-height: 100%;
        }

        .grid-container{
            display: grid;
            height: 100%;
            grid-template-rows: repeat(3, 1fr);
        }

        .grid-items{
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid black;  
        }

        .slot-image{
            height: auto;
            width:auto;
            max-height: 100%;
            max-width: 100%;
        }

    </style>

</head>



<body> 
    <section id="page1">
        <div class="grid-container">
            <div class=grid-items>
                <img class="slot-image" src="WC%20Sov%20edit.png" alt="sov">
            </div>
            <div class=grid-items>image</div>
            <div class=grid-items>image</div>
        </div>

        <div class="grid-container">
            <div class=grid-items>
                <img class="slot-image" src="WC%20Sov%20edit.png" alt="sov">
            </div>
            <div class=grid-items>image</div>
            <div class=grid-items>image</div>
        </div>     
    </section>
</body>

</html>

1 Ответ

0 голосов
/ 17 сентября 2018

Я бы обернул определение grid-template-rows: repeat(3, 1fr); в @ медиа-запросы . Где вы можете определить точки останова min и max.

Например: 

@media only screen and (max-width: 480px) { // Small Devices
    .grid-container{   
        grid-template-rows: repeat(3, 1fr); // 3 columns
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) { // Medium Devices
    .grid-container{   
        grid-template-rows: repeat(4, 1fr); // 4 columns
    }
}

@media only screen and (min-width: 769px) { // Large Devices
    .grid-container{   
        grid-template-rows: repeat(5, 1fr); // 5 columns
    }
}
...