grid

grid 는 2차원 (행,열)의 레이아웃 시스템을 제공한다.
flex 는 1차원 구조 레이아웃 시스템
grid 도 flex 와 마찬가지로 container item 로 구성된다.

<div class="container">
      <div class="item item1">item1</div>
      <div class="item item2">item2</div>
      <div class="item item3">item3</div>
      <div class="item item4">item4</div>
      <div class="item item5">item5</div>
      <div class="item item6">item6</div>
      <div class="item item7">item7</div>
      <div class="item item8">item8</div>
    </div>

.container {
  border: 2px solid red;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-rows: repeat(2, 100px);
  grid-gap: 15px;
  padding: 10px;
}
.item {
  border: 2px solid blue;
}

위의 그림을 flex로 만들려면 row방향의 두개의 container가 필요할 것이다.
그러나 grid를 이용해 하나의 큰 container로 row 와column 을 한번에 쉽겢 정리할수있다.

contaier(부모요소)에 쓰이는 속성

grid-template-columns : 템플릿 열 지정
grid-template-row : 템플릿 행 지정
이때 여러가지 단위를 사용할수있고
대표적으로 fr (비율로 크기를 조정)이 존재한다.
↪️repeat() 함수 : 반복 작업을 간편하게
repeat(반복횟수, 값)
ex)

grid-template-columns : repeat(4, 1fr);
grid-template-columns : 1fr 1fr 1fr 1fr;

row-gap : row의 간격
column-gap : column의 간격
gap : : (row)10px (column)20px;

item(자식)에 쓰이는 속성

grid-column
grid-row

.item5 {
  grid-row: 2/3;
  grid-column: 1/3;
  background: green;
}

시작선 / 끝선

많은 속성들이 존재하나 아직은 실제로 적용한 경험이 없어 앞으로 적용할때마다 새롭게 업데이트 예정