그리드를 사용하여 특정 디자인 만들기: 단계별 가이드

Question

이 이미지와 유사한 레이아웃을 만들려고 합니다. 이 그리드를 사용해 보았지만 만들 수 없습니다.

으아악

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

Answer 1

이것을 시도해 보았는데 효과가 있었습니다

HTML에서

으아악

Answer 2

html과 CSS가 변경되었으며 레이아웃에 ul和li를 사용하지 않는 것이 좋습니다. 요구 사항에 따라 그리드를 확장해야 합니다.

으아악 으아악