CSS: Grid 기본속성 (수정중)

grid는 flex처럼, 유연하게 이용할 수 있는 구조이다.

 

<style>
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr 2fr 1fr);
        grid-template-rows: repeat(3, minmax(100px, auto));
        grid-template-columns: repeat(auto-fill, minmax(200px, auto));
        grid-auto-rows: minmax(100px, auto);
        gap: 1rem;
      }

      .grid-item:nth-child(4) {
        grid-row: 3 / span 2;
      }
</style>

 

이러한 속성들이 있는데,