如何使用CSS网格根据元素数量控制列空间

时间:2018-07-30 00:46:48

标签: css css-grid

例如,我想使用一个最多具有3列的类,但是如果我只有2个元素,则该行会将这些元素与中心对齐 CSS网格有可能吗?

在下面的示例中,我想将第二行的元素居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid</title>
    <style>
        .grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
        }

        .grid > div {
        height: 100px;
        width: 100px;
        background-color: red;
        }
    </style>
</head>
<body>
    <div class="grid">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</body>
</html>

DEMO

2 个答案:

答案 0 :(得分:0)

使用JavaScript,您可以检查该行是否只有两个元素,然后:

  1. 将第二个元素移到第三列
  2. 删除中间一列

这样,该行将只有2列,并且将居中对齐。

答案 1 :(得分:0)

我想我通过flexbox获得了想要的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid</title>
    <style>
        .grid {
            display: flex;
            flex-wrap:wrap;
        }

        .grid > div {
            background: red;
            height: 100px;
            margin: 10px;
            flex-grow: 1;    
           width: calc(100% * (1/3) - 10px - 10px);
        }
    </style>
</head>
<body>
    <div class="grid">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</body>
</html>

DEMO