Menggunakan Grid untuk Mencipta Reka Bentuk Khusus Ini: Panduan Langkah demi Langkah

Question

Saya cuba membuat reka letak yang serupa dengan imej ini, saya telah cuba menggunakan grid ini tetapi tidak dapat melakukannya.

<ul class = "container">
     <li class = "first"> </li>
     <li class = "second"> </li>
     <li class = "third"> </li>
     <li class = "fourth"> </li>
</ul>

.container{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 20px;
}

.first{
   grid-column: span 2;
}

Answer 1

Saya mencuba ini dan ia berkesan

Dalam HTML

    

      

      

      

      

    
  

In CSS

body {
  margin: 0px;
  padding: 0px;
}

.container {
  height: 500px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  margin: 20px;
}

.first {
  border: 5px solid black;
  grid-column: span 2;
  grid-row: 1/3;
}

.second {
  border: 5px solid black;
  grid-column: span 2;
  grid-row: 1/2;
}

.third {
  border: 5px solid black;
  grid-column: span 1;
  grid-row: 2/3;
}

.fourth {
  border: 5px solid black;
  grid-column: span 1;
  grid-row: 2/3;
}

Answer 2

html dan css telah ditukar, dan tidak disyorkan untuk menggunakan ul和li untuk susun atur. Anda perlu menjangkau grid mengikut keperluan anda.

.container{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 20px;
   width: 500px;
   background:#ccc;
   height:500px;
}

.first{
  background:red;
   grid-column: span 2;
  grid-row: 1/3;
}
.second{
  background:green;
   grid-column: span 2;
  grid-row: 1/2;
}
.third{
  background:yellow;
   grid-column: span 1;
  grid-row: 2/3;
}
.fourth{
  background:orange;
   grid-column: span 1;
  grid-row: 2/3;
}