📝 오늘 한 것

1. grid - fr / grid-template / place-items

📚 배운 것

1. grid

1) fr

화면 크기가 변해도 item의 비율이 똑같을 수 있도록 flexible grid layout을 만들기 위해 fr이라는 단위를 사용할 수 있다.
1fr의 크기는 grid container에서 '사용 가능한 공간'을 기반으로 계산된다.
그러므로 fr을 row에 사용하기 위해서는 grid container에 'height'를 지정해야 한다.

<div class="grid">
  <div class="header"></div>
  <div class="content"></div>
  <div class="nav"></div>
  <div class="footer"></div>
</div>

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

2) grid-template

1. grid-area를 이용해 cell에 이름을 붙인다.
2. 먼저, grid container에서 row(cell 이름)를 작성한다.
3. 각 row의 높이를 fr 단위로 작성한다.
4. 마지막 row에 각 column의 너비도 fr 단위로 작성한다.

.grid {
  display: grid;
  gap: 10px;
  height: 50vh; /* 💡 grid container에 height를 지정해야 한다 */
  grid-template:
    "header header header header" 1fr
    "content content content nav" 2fr
    "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr;
}

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

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

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

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

한편, grid-template에서 row마다 앞 뒤로 line 이름을 지정할 수도 있다.

참고로 grid-template에서 repeat(4, 1fr)은 사용할 수 없다.
적는다면 1fr 1fr 1fr 1fr로 적어야 한다.

grid-template:
  [header-start] "header header header header" 1fr [header-end]
  [content-start] "content content content nav" 2fr [content-end]
  [footer-start] "footer footer footer footer" 1fr [footer-end] / 1fr 1fr 1fr 1fr;

이처럼 grid-template을 사용하면 화면이 어떤 모습일지 코드 상에서 그림을 그리듯이 이야기할 수 있다.

3) place items

위의 HTML 코드에서 grid item 안에 text만 추가해주었다.

<div class="grid">
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="nav">nav</div>
  <div class="footer">footer</div>
</div>

(1) justify-items

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  justify-items: stretch;
}

grid container에서 사용되는 justify-items의 기본값은 stretch이다.
이는 grid item들이 자신들의 크기를 늘려서 grid container의 크기를 채우도록 한다.

예제에서 grid container의 크기는 height를 50vh로 지정했기 때문에 브라우저 크기의 절반에 해당한다.
grid item 16개로 브라우저 크기의 절반을 채우기 위해 grid item들의 크기가 늘어난 것이다.

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  justify-items: center;
}

그 외에도 justify-items의 값으로는 start, center, end 등의 값이 올 수 있다.
다만, justify-items의 값으로 stretch가 아닌 다른 값을 지정하더라도 height에 의해 지정된 grid container의 row의 높이는 변하지 않는다.

(2) align-items

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  align-items: center;
}

마찬가지로 align-items의 값으로 stretch가 아닌 다른 값을 지정하더라도 1fr로 지정된 grid container의 column의 너비는 변하지 않는다.

한편, text를 지워버리면 너비와 높이가 없기 때문에 개발자 도구의 element 탭에서 16개의 구역으로 나뉘어진 것만 확인할 수 있을 뿐 브라우저 화면에서는 아무것도 볼 수 없다.

text 없이 화면에서 grid item을 보기 위해서는 각 grid item에 width와 height 값을 지정해야 한다.

(3) place-items

place-items: align-items 값(수직) justify-items 값(수평);

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  place-items: end center; 💡
}

✨ 내일 할 것

1. grid