根据列宽添加新的拟合行?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了根据列宽添加新的拟合行?相关的知识,希望对你有一定的参考价值。

我有这个代码,其中只有一列有三个不同的行适合视口。每行将包含一个适合身高的图像。我想这样做,以便如果浏览器水平调整大小,并且该列(视口)的宽度低于某个点,则在页面上插入额外的行,这也适合视口。因此它会从三行拟合到四行,然后是五行,依此类推,具体取决于一列/视口的宽度:

<!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>
答案

我会在grid-template-rows: repeat(3, 1fr);中包装@media queries定义。你可以在哪里定义minmax断点。

例如:

@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
    }
}

以上是关于根据列宽添加新的拟合行?的主要内容,如果未能解决你的问题,请参考以下文章

如何在C#中 禁止 dataGridView 自动添加行

fastreport中列宽固定 根据字段内容多少自动调整行高

qt中QTableWidget怎么根据内容自动调整列宽行高?

怎样根据内容自动调整excel表格的行高列宽?

Jqgrid根据其内容可编辑列宽

excel怎么设置自动换行和自动列宽