그리드로 footer 만들기

grid 푸터 예시

우리는 푸터를 만들 때, 위와 같이 푸터를 하단에 고정하기 위해 고민한다.

나도 에이블 프로젝트를 할 때, 고민을 많이 했었고, position을 썼었던 걸로 기억하는데 깔끔하게 처리하지 못했었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="main-layout">
  <header>
    SIMPLIFY YOUR CSS WITH THESE 3 GRID LAYOUT SOLUTIONS Lorem ipsum dolor, sit
    amet consectetur adipisicing elit. Enim fugiat fuga illum doloribus
    perferendis asperiores ab voluptatem laudantium, dignissimos nulla. Nemo
    minus aliquid nesciunt quos temporibus ratione dicta quas doloremque.
  </header>

  <main>
    <h1>Title</h1>
    <p>Contents</p>
  </main>

  <footer>
    <div>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt soluta
      hic, odit ad quisquam iste? Magnam, animi ut, tempore libero a aliquam
      vitae quos alias possimus fugiat officia, temporibus illo!
    </div>
  </footer>
</div>

위와 같은 HTML 구조를 가지는 예시를 들어보자.

1
2
3
4
5
6
.main-layout {
  min-height: 100vh;

  display: grid;
  grid-template-rows: auto 1fr auto;
}
  • header, main, footer 를 감싸는 컨테이너의 min-height를 100vh로 화면에 꽉차게 설정
  • grid 속성을 주어 빈 공간이 없게 만든다.
  • grid의 rows 속성의 너비를 지정한다.
    • auto로 설정하면 해당 태그가 가지고 있는 높이만큼만 설정하게된다.