푸터를 만들 때, Grid를 사용하여 설계를 해보자.

1
2
3
4
5
<div class="grid">
  <div class="item grid-item1">1</div>
  <div class="item grid-item2">2</div>
  <div class="item grid-item3">3</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.grid {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}
.item {
  height: 100px;
  border: 1px solid black;
}
.grid-item1 {
  background: yellow;
  grid-area: 1/2/2/4;
}
.grid-item2 {
  background: green;
}
.grid-item3 {
  background: pink;
  grid-area: 1/1/1/1;
}

Grid 레이아웃

  • 전체적인 레이아웃은 grid를 사용하고 내부의 세부적인 레이아웃은 flex를 사용한다.
  • grid 내부의 크기를 grid-area로 지정할 수 있다.
  • grid-area: 열,행
  • grid는 margin-collapse 일어나지 않는다.