Grid

grid는 가로세로로 영역을 잡는 2차원적인 레아이웃 시스템이다. 전체적인 툴을 잡는데 유용하다.

<div class="container">
	<div class="item">A</div>
	<div class="item">B</div>
	<div class="item">C</div>
	<div class="item">D</div>
	<div class="item">E</div>
	<div class="item">F</div>
	<div class="item">G</div>
	<div class="item">H</div>
	<div class="item">I</div>
</div>

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
.item {
  border: 1px solid black;
}

이렇게 요소들을 감싸고 있는 컨테이너에 display: grid; 속성을 주고,

grid-template-columns으로 행 배치(가로)

grid-template-rows으로 열 배치(세로)  을 해준다. 이때 px단위를 쓸 수도 있고, fr단위도 쓸 수 있다. fr은 배율이다.

1fr 2fr 1fr 하면 전체의 1:2:1 비율로 폭을 잡아주세요 이다.

 

이렇게 한 다음 셀을 합치거나 하는 레이아웃은 2가지 방법이 있다.

 

1. 자식에게 직접 레이아웃을 잡게한다.

자식에게 클래스를 부여하고

.header {
  grid-column : 1 / 4;
  grid-row : 2 / 4;
}

이런 식으로 자기가 차지할 영역을 가지게 할 수 있다. 여기서 1, 4 이런 숫자는

이렇게 가로세로선을 의미한다.

 

2. 부모가 배치하기

먼저 자식에게 이름을 주고, 부모에서 배치하는 방법이 있다.

<div class="grid-container">
    <div class="grid-nav">헤더</div>
    <div class="grid-sidebar">사이드바</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div

이름은 grid-area: 이름; 으로 줄 수 있다.

.grid-nav {
  grid-area: 헤더;
}

.grid-sidebar {
  grid-area: 사이드;
}

위처럼 이름을 준 후, 부모 클래스에 grid-template-areas: " "; 로 레이아웃을 잡아준다.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px; //grid 아이템들의 간격을 의미함
  grid-template-areas: 
    "헤더 헤더 헤더 헤더"
    "사이드 사이드 . ." //빈 공간은 .을 이용해 표시한다
    "사이드 사이드 . ."
}

이렇게 레이아웃이 잡힌다.