Grid

fraction (fr)

grid containerd 에서 사용가능한 공간(비율)

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

주의점

grid container 의 크기를 지정해줘야 fr 사용가능하다

Super shortcut

grid-template(부모) && grid-area(자식)

• grid-template-row, grid-template-columns 쓰지 않는 방법
• 단, column 너비 정의시 repeat 사용 불가능

사용법

1. grid-template 부모에 사용 cell의 이름 정의 , row높이, column 너비 적용
2. 자식에 grid-area 로 이름 부여하기

.grid {
  height: 50vh;
  display: grid;
  gap: 10px;
  grid-template:
    "header header header header" 1fr //row 높이 명시
    "content content content nav" 2fr //row 높이 명시
    "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr; //row 높이 명시 && column의 너비 명시
}

.header {
  background-color: aqua;
  grid-area: header;
}

.content {
  background-color: pink;
  grid-area: content;
}

.nav {
  background-color: yellowgreen;
  grid-area: nav;
}

.footer {
  background-color: black;
  grid-area: footer;
}