css中网格布局中的盒子协议

Question

我希望前两个框以最大宽度向上，第二个框以最大宽度向下，这是代码。

这是 CSS 代码：

/* Start Services  */
.services {
    padding-top: var(--section-pading);
    padding-bottom: var(--section-pading);
}
@media (min-widht: 768px) {
    .services .services-contianer {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    }
}
.services .box {
    display: flex;
}
.services .box i{
    margin-right: 50px;
}
.services .box h3{
    margin-bottom: 30px;
    color: var(--main-color);
}
.services .box p{
    line-height: 2;
}
/* End Services  */

这是 HTML 代码：

<!-- Start Services -->
    <div class="services">
        <div class="container">
            <div class="main-heading">
                <h2>Services</h2>
                <p> Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris 
                    blandit aliquet elit, eget tincidunt.
                </p>
            </div>
            <div class="services-container">
                <div class="box">
                    <i class="fa-solid fa-display fa-3x"></i>
                    <div class="text">
                        <h3>Vorem amet intuitive</h3>
                        <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at 
                            sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar 
                            a. Curabitur aliquet quam.</p>
                    </div>
                </div>
            </div>
            <div class="services-container">
                <div class="box">
                    <i class="fa-solid fa-gear fa-3x"></i>
                    <div class="text">
                        <h3>Vorem amet intuitive</h3>
                        <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at 
                            sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar 
                            a. Curabitur aliquet quam.</p>
                    </div>
                </div>
            </div>
            <div class="services-container">
                <div class="box">
                    <i class="fa-solid fa-pen-ruler fa-3x"></i>
                    <div class="text">
                        <h3>Vorem amet intuitive</h3>
                        <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at 
                            sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar 
                            a. Curabitur aliquet quam.</p>
                    </div>
                </div>
            </div>
            <div class="services-container">
                <div class="box">
                    <i class="fa-solid fa-camera fa-3x"></i>
                    <div class="text">
                        <h3>Vorem amet intuitive</h3>
                        <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at 
                            sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar 
                            a. Curabitur aliquet quam.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Services -->

这是我得到的结果：

在此处输入图像描述

我希望设计如下图所示，我想要 2 个向上和 2 个向下的盒子：

在此处输入图像描述

你能帮忙吗？

Answer 1

在这段代码中添加这个样式有一些错误。

您可以删除此代码，而不是这样做

@media (min-widht: 768px) {
    .services .services-contianer {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    }
}

并添加此 CSS 代码希望您能实现您想要的输出

.container {
  display: flex;
  flex-wrap: wrap;
}

.services-container .box {
  width : 400px;
  min-width: 50%;
}

Answer 2

当我检查代码时，CSS 代码中存在拼写错误。我对 HTML 代码进行了一些更改。

拼写错误：

请检查更新后的以下代码：

/* Start Services  */
.services {
    padding-top: var(--section-pading);
    padding-bottom: var(--section-pading);
}
@media (min-width: 768px) {
    .services .services-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
/*       background-color: red; */
    }
}
.services .box {
    display: flex;
}
.services .box i{
    margin-right: 50px;
}
.services .box h3{
    margin-bottom: 30px;
    color: var(--main-color);
}
.services .box p{
    line-height: 2;
}
/* End Services  */

 
    

        

            

                
Services
                
 Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris 
                    blandit aliquet elit, eget tincidunt.
                
            
            

                

                    
                    

                        
Vorem amet intuitive
                        
Curabitur arcu erat, accumsan id imperdiet et, porttitor at 
                            sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar 
                            a. Curabitur aliquet quam.
                    
                
              

                    
                    

                        
Vorem amet intuitive
                        
Curabitur arcu erat, accumsan id imperdiet et, porttitor at 
                            sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar 
                            a. Curabitur aliquet quam.
                    
                
              

                    
                    

                        
Vorem amet intuitive
                        
Curabitur arcu erat, accumsan id imperdiet et, porttitor at 
                            sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar 
                            a. Curabitur aliquet quam.
                    
                
              

                    
                    

                        
Vorem amet intuitive
                        
Curabitur arcu erat, accumsan id imperdiet et, porttitor at 
                            sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar 
                            a. Curabitur aliquet quam.