grid(2)

저번 포스팅에서는 그리드를 선언하고 작성하는 방법에 대해서 알아보았다.

이번에는 템플릿 레이아웃에 대하여 알아보도록 하자!

네모네모 블록쌓기 말고, 좀 더 다양한 형태의 레이아웃을 짜고 싶을 땐 어떻게 하면 좋을까?

 

---

1. grid-line

각 아이템의 위치와 크기를 조정하는 속성이다.

아이템이 4개 있는 컨테이너에게 column과 row를 지정해 주었다.

.container {
	display: grid;
	grid-template-columns: 150px 150px 150px;
	grid-template-rows: 150px 150px;
}

 

그런 다음  start와 end를 시용해 첫 번째 아이템이 1에서 시작해서 4에서 끝나도록 아래와 같은 속성을 추가하였다.

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

그런데 column은 세 개인데 end의 4는 어디서 나온 걸까?

여기서의 숫자는 정확히는 그리드 라인(Grid Line)을 가리킨다. 위 그림을 보면 item1이  그리드 라인 1에서 시작해 4에서

끝나도록 설정했다는 것을 알 수 있고 item2와 item3은 밑으로 밀려난 것도 볼 수 있다.

 

---

2. span

끝 지점을 지정하는 게 귀찮다고 한다면, span을 이용해 column 넓이를 지정할 수도 있다.

span을 사용하여 더 간단하게 item4는 2만큼, item6은 3만큼 늘어나도록 하였다.

.container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.item4 {
  grid-column-end: span 2;
}

.item6 {
  grid-column-end: span 3;
}

 

row 역시 마찬가지로 grid-row-start와 grid-row-end를 지정할 수 있다.

.container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 100px);
}

.item4 {
	grid-row-start: 2;
	grid-column-end: span 3;
}

 

 

---

3. grid-column, grid-row

span보다 더 간단한 방법도 있는데 grid-column 속성 하나에 다 때려쓰는 방법이다.

형식은 간단하다. 아래 코드에서 grid-column: 2 / 5;에 start는 2고 end는 5를 의미한다.

만약, grid-column: 3 / span 3; 이면 라인 3에서 시작해서 3칸을 차지하게 될것이다.

.container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.item2 {
	grid-column: 2 / 5;
}

 

 

지금까지 배운 걸 응용한다면 이런 레이아웃도 만들 수 있다.

  <div class="container">
    <span class="item item1">1</span>
    <span class="item item2">2</span>
    <span class="item item3">3</span>
    <span class="item item4">4</span>
    <span class="item item5">5</span>
    <span class="item item6">6</span>
  </div>