[CSS] Grid 그리드(레이아웃) 정리

Grid란?

CSS의 레이아웃 시스템이며

2차원 레이아웃으로 아이템들을 배치한다.

사용방법으로는 Flex박스와 비슷하게 사용된다.

<div class="grid">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
  <style>
    .grid {
      display: grid;
    }
    .item {
      padding: 4rem;
      border: 2px solid #ccc;
      background: #f4f4f4;
      font-size: 1.4rem;
      text-align: center;
    }
  </style>

/* Grid 열 만들기 */
  grid-template-columns: 300px 300px 300px;

.grid {
	  /* Grid rows */
      display: grid;
      grid-template-rows: 1fr 2fr 3fr;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.item:first-child {
      grid-column: 1/4;
      grid-row: 1/3;
}