protokol kotak dalam susun atur grid dalam css

Question

Saya mahu dua kotak pertama naik dengan lebar maksimum dan kotak kedua turun dengan lebar maksimum, berikut adalah kodnya.

Ini ialah kod 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  */

Ini ialah kod 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 -->

Inilah hasil yang saya dapat:

Masukkan penerangan imej di sini

Nak design macam gambar bawah ni, nak 2 kotak atas dan 2 bawah:

Masukkan penerangan imej di sini

Bolehkah anda membantu?

Answer 1

Terdapat beberapa ralat dalam menambah gaya ini dalam kod ini.

Anda boleh memadamkan kod ini dan bukannya melakukan ini

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

Dan tambahkan kod CSS ini harap anda boleh mencapai output yang anda inginkan

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

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

Answer 2

Apabila saya menyemak kod, terdapat kesilapan taip dalam kod CSS. Saya membuat beberapa perubahan pada kod HTML.

Ralat ejaan:

Sila semak kod yang dikemas kini di bawah:

/* 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.