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; }
Saya mencuba ini dan ia berkesan
Dalam HTML
html dan css telah ditukar, dan tidak disyorkan untuk menggunakan
ul
和li
untuk susun atur. Anda perlu menjangkau grid mengikut keperluan anda.