【求助】css grid布局问题？

站长

2024年06月20日 08:38 · 阅读数 11

问题1：box1为grid-template-columns: repeat(auto-fill, 20; grid-row-gap: 20px;的情况下没有办法1行5个？如下图：【求助】css grid布局问题？

问题2：box2为grid-template-columns: auto auto auto auto auto;的情况下，li不足5个是，li的宽度会增多？如下图：【求助】css grid布局问题？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html</title>
    <style>
        ul,li {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
        .box1 {
            margin: 0 auto;
            background: green;
            width: 500px;
            display: grid;
            grid-auto-flow: row;
            grid-template-columns: repeat(auto-fill, 20%);
            grid-row-gap: 20px;
            grid-column-gap: 20px;
        }
        .box1 li {
            background-color: red;
        }
        .box2 {
            margin: 20px auto;
            background: green;
            width: 500px;
            display: grid;
            grid-auto-flow: row;
            grid-template-columns: auto auto auto auto auto;
            grid-row-gap: 20px;
            grid-column-gap: 20px;
        }
        .box2 li {
            background-color: red;
        }
    </style>
</head>
<body>  
    <ul class="box1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <ul class="box2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <ul class="box2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>

</html>

1个回答

test

2024-06-20

这样?

grid-template-columns: repeat(auto-fit, calc((100% - 4 * 20px) / 5));

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容