GRID이용해서 DIV 일정간격으로 분배하기

그리드 레이아웃이란(Grid Layout)?

페이지를 여러 주요 영역으로 나누거나 크기 및 위치 문서 계층 구조의 관점에서 작성된 content 간 관계 정의하는데 아주 효율적인 레이아웃!

 

테이블처럼 세로 열과 가로 행을 기준으로 편하게 사용할 수 있다. 하지만 실질적으로 grid를 사용할 일이 없어서 잘 모르고 있다가 여러개의 일렬로 출력되는 데이터들을 2줄씩 출력하고 싶었다. 하지만 테이블을 이용하거나 flex를 이용하는 것보다 grid를 이용해서 하는 것이 더 효율적이라는 것을 발견!

---

만약 이러한 코드가 있다고 가정을 하자

 

<div class="content_wrap">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>

.content_wrap{
  width: 200px;
  height: fit-content;
}
.content_wrap .content{
  height: 20px;
  background: green;
  margin: 5px;
}

---

이 div를 2x2로 테이블처럼 출력하고 싶으면 어떻게 해야될까?

Grid를 쓰면 편리하게 할 수 있다!

<div class="content_wrap">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>

.content_wrap{
  width: 200px;
  height: fit-content;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}
.content_wrap .content{
  height: 20px;
  background: green;
}

여기서 grid-column-gap은 열과 열사이의 간격, grid-row-gap은 행과 행사이의 간격을 의미!

 

* https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout 를 참고하여 작성하였습니다 *