[Modern CSS] 하단에 footer 고정하기 flex vs grid

Moder CSS 첫 번째 주제 - footer 하단 고정 flex vs grid

• 괜찮은 Modern Css 소개 페이지가 있어 연재를 하려고 합니다.
• 그 첫 번째 시간으로 하단에 footer 고정하기

 

먼저 Flex를 통하여 고정시키는 방법이 있습니다

body {
  min-height: 100vh; /* 최소 높이를 지정 */
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto; /* 최소 높이 하단에서 자동으로 뻗어나가도록 설정 */
}

/* optional */
main {
  margin: 0 auto;
  /* or: align-self: center */
  max-width: 80ch;
}

두번째로 Grid 를 통하여 고정시키는 방법이 있습니다

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* 선택사항 */
main {
  margin: 0 auto;
  max-width: 80ch;
}

머리글과 바닥 글 사이의 사용 가능한 모든 공간을 채우고 flexbox 방법의 선택사항으로 footer에 추가로 margin-top: auto 속성을 줘야 되는 부분을 생략해도 됩니다.

하지만, 머릿글과 바닥글 사이에 또 다른 fraction이 존재해야 한다면 (1fr이 아니게 되므로) fraction을 업데이트 해줘야만 합니다.

 

어떤 방법이 더 낫냐보다는 그 때의 상황에 맞게 적절히 선택하여 사용해보세요! 

 

감사합니다.

 

 

 

출처 : https://moderncss.dev/keep-the-footer-at-the-bottom-flexbox-vs-grid/