无法让CSS网格显示多个列

Question

这是它目前的样子(我缩小了一点以在图片中获得更多信息)：

​

这就是我想要的样子：

​

这是我的HTML：

<div class="popularContainer">
    <div class="popularContent">
        <div class="content-1"> 
            <div class="content-1-container-content">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi inventore illum voluptatem quod necessitatibus voluptatum incidunt vero aperiam. Iste, voluptas.</p>
            </div>
        </div> 
        <div class="content-2"> 
            <div class="content-2-container-content">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi inventore illum voluptatem quod necessitatibus voluptatum incidunt vero aperiam. Iste, voluptas.</p>
            </div>
        </div>      
        <div class="content-3"> 
            <div class="content-3-container-content">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi inventore illum voluptatem quod necessitatibus voluptatum incidunt vero aperiam. Iste, voluptas.</p>
            </div>
        </div>   
        <div class="content-4">   
            <div class="content-4-container-content">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi inventore illum voluptatem quod necessitatibus voluptatum incidunt vero aperiam. Iste, voluptas.</p>
            </div>
        </div> 
        <div class="content-5"> 
            <div class="content-5-container-content">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi inventore illum voluptatem quod necessitatibus voluptatum incidunt vero aperiam. Iste, voluptas.</p>
            </div>
        </div> 
        <div class="content-6"> 
            <div class="content-6-container-content">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi inventore illum voluptatem quod necessitatibus voluptatum incidunt vero aperiam. Iste, voluptas.</p>
            </div>
        </div> 
    </div>
</div>

这是我的CSS：

.popularContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, auto));
    grid-auto-rows: 300px;
    gap: 75px 50px;
    justify-content: center;
}

.content-1 { 
    order: 1;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    perspective: 1000px;
    background-color: #30475E;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.content-2 { 
    order: 2;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    perspective: 1000px;
    background-color: #30475E;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.content-3 { 
    order: 3;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    perspective: 1000px;
    background-color: #30475E;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.content-4 { 
    order: 4;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    perspective: 1000px;
    background-color: #30475E;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.content-5 { 
    order: 5;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    perspective: 1000px;
    background-color: #30475E;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.content-6 { 
    order: 6;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    perspective: 1000px;
    background-color: #30475E;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

此外，在测试了一些之后，我怀疑它与另一段代码有关，所以如果有帮助，我将在这里链接到它。

链接：https://codepen.io/DominickDominick/pen/QWMqjQw

谢谢你在这方面的帮助。

Answer 1

您为类popularContainer编写的css必须是用于类popularContent.的

因此，一个简短的解决方案是删除该类：

.popularContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, auto));
    grid-auto-rows: 300px;
    gap: 75px 50px;
    justify-content: center;
}

并将其替换为类：

.popularContent{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, auto));
    grid-auto-rows: 300px;
    gap: 75px 50px;
    justify-content: center;
}

您没有将任何css应用于content-1/6的父内容。如果您有任何问题，请随时提出。

Answer 2

您正在寻找弹性方向属性https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction。您需要删除html中的css div，然后添加以下popularContent：

.popularContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,auto));
    grid-auto-rows: 300px;
    gap: 75px 50px;
    justify-content: center;
    flex-direction: row;
}

flex-direction默认设置为column。