grid는 대단해..!

---

📚 What is TIL?

grid

grid-container에서 사용하는 속성

grid-template-columns

• 세로 열 방향(column) 그리드 트랙의 사이즈를 설정한다

grid-template-rows

• 가로 행 방향(row) 그리드 트랙의 사이즈를 설정한다

.container {
  grid-template-columns: 200px 200px 500px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: 200px 1fr;
  grid-template-columns: 100px 200px auto;

  grid-template-rows: 200px 200px 500px;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-template-rows: 200px 1fr;
  grid-template-rows: 100px 200px auto;
}

grid의 함수

repeat()

• 반복되는 패턴을 나타내는 많은 수의 열 또는 행을 간결하게 작성하도록 도와준다
• repeat(반복 횟수 | 반복할 값)형식으로 사용한다

minmax()

• 그리드에서 최소와 최대 사이의 범위를 설정하는 함수이다
• 최소와 최대값을 의미하는 두 가지 인자를 가지는데
• min보다는 크거나 같고 max보다는 같거나 작은 범위로 값을 유연하게 처리한다

🔎 minmax()로 사용 가능한 공간과 표시되는 콘텐츠에 따라 동적으로 조정되는 그리드 레이아웃을 만들 수 있다
🔎 가독성이나 시각적 호소력을 희생하지 않고도 레이아웃을 다양한 화면 크기와 종횡비에 맞출 수 있다

ex) repeat(auto-fit, minmax(200px, 1fr))
예를 들어 컨테이너의 너비가 1000px이고 그리드에 3개의 열이 있는 경우
각 열의 너비는 최소 200px(최소 크기)이고 컨테이너 너비의 최대 1/3(최대 크기)이다
컨테이너가 600px보다 넓으면 열이 확장되기 시작하여 남은 사용 가능한 공간을 차지한다

auto-fill auto-fit | 빈 트랙의 생성유무

auto-fit

• 사용 가능한 공간에 맞게 가능한 많은 행이나 열을 생성한다
• 남는 공간이 있으면 빈 트랙을 생성하여 공간을 채운다

auto-fill

• 설정된 너비에 맞춰 남는 공간을 셀들이 나누어 차지한다
• 빈 트랙을 생성하지 않고 그리드의 항목에 맞게 트랙 크기를 조정한다

See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.

⚠️ grid를 사용하는 경우 한 셀의 콘텐츠 높이가 동일한 행 또는 열이 있는경우
모든 셀 높이에 영향을 미칠 수 있으므로 콘텐츠의 높이가 다를 경우 레이아웃 왜곡이 발생할 수 있다
⚠️ 기본적으로 그리드 트랙(행 또는 열)이 콘텐츠에 맞게 크기를 조정하기 때문이다

레이아웃 왜곡의 해결법

🔎 minmax()를 사용하여 해결 할 수 있다

See the Pen grid by tjqehd23 (@tjqehd23) on CodePen.

✔️ 최소 크기를 설정하면 트랙이 너무 많이 축소되어 콘텐츠가 넘치거나 인접한 트랙에서 겹치는 것을 방지할 수 있다
✔️ 최대 크기를 설정하면 트랙이 너무 커져 원하지 않는 공백이 생기는 것을 방지한다

🔎 또 다른 방법으로 gid-template 와 grid-auto 속성으로도 해결 할 수 있다

See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.

✔️ 내용에 관계없이 그리드의 모든 그리드 트랙에 대해 고정 너비와 높이를 설정할 수 있다

align-content

• 그리드 콘텐츠의 수직(열) 정렬

align-area

• 그리드 콘텐츠의 수평(행) 정렬

🔎 stretch | center | start | end | space-around | space-between | space-evenly

align-items

• 직계 자식에 대한 수직(열) 정렬을 모두 동일하게 준다

justify-items

• 직계 자식에 대한 수평(열) 정렬을 모두 동일하게 준다

🔎 stretch | center | start | end

grid-area

• 그리드 컨테이너에서 항목의 시작 및 끝 위치를 정의하는 속성이다
• grid-row-start | grid-column-start | grid-row-end | grid-column-end 순서로 단축적으로 사용이 가능하다

span

• 행과 열을 병합할때 span 키워드를 사용한다

⚠️ span을 쓰다보면 잘못된 값으로 인해 요소들이 겹쳐져 하나의 요소가 덮이는 경우가 있다

See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.

✔️ 이러한 경우 z-index로 화면에 보여지는 우선순위를 통해 문제를 직접 확인 할 수 있다
✔️ 잘 보면 item3가 item2에게 가려진 것을 확인할 수 있다

justify-self

• 그리드 셀 내에서 그리드 항목의 수평 정렬을 제어한다

align-self

• 그리드 셀 내에서 그리드 항목의 수직 정렬을 제어한다

🔎 start - 그리드 셀의 시작 가장자리에 항목을 정렬한다
🔎 end - 리드 셀의 끝 가장자리에 항목을 정렬한다
🔎 center - 그리드 셀의 중앙에 항목을 정렬한다
🔎 stretch - 항목을 늘려 전체 그리드 셀을 채운다

place-self

• place-self: center end 와 같이 align-self | justify-self 를 함께 적는 단축속성이다

grid-template-areas, grid-auto-flow

…

---

🔗 TIP

Media Query

grid 사용의 장점 중 하나는 반응형 디자인을 만들기 위해 반드시 미디어 쿼리를 사용할 필요는 없다는 것이다
하지만 flex 또는 float를 사용하는 경우 미디어 쿼리를 사용해서 다양한 화면 크기에서 레이아웃을 조정해야 할 수 있다

그렇다면 왜 ?

💡 grid는 복잡한 레이아웃을 쉽게 만들 수 있는 강력한 css 레이아웃 시스템이기 때문..
💡 flex와 float가 문서 내 콘텐츠의 순서와 흐름에 의존하기에 복잡한 레이아웃에 대해 조작하기 더 어려울 수 있기 때문..

flex 와 grid 무엇을 택할까?

오늘 grid의 grid-template-areas 를 통해 더 시각적으로 요소들을 정렬하다 보니,
flex보다 grid의 장점이 더 두드러져 보였다
그렇지만 뭐가 더 좋다기보다 골고루 사용해 보면서,
적재적소에 맞게 사용하는 것이 올바른 사용법인 것 같다

💡 전체적인 틀을 grid로 짜고 grid cell 안에서 flex를 적용시키는 것이 좋을 것 같다는 생각이다!

브라우저 버전에 대한 대응

이제 막 배우는 내 입장에선 grid와 flex가 최신 기술같이 느껴지지 않아서
모든 브라우저에서 원활하게 사용할 수 있을 거라고 생각한다면 오산이다..!
grid의 gap 속성의 경우 일부 버전에서 지원하지 않을 수 있다

💡 사전에 브라우저의 얼마만큼의 버전의 범위를 대응할 것인지 디테일하게 생각해야 한다고 한다..!

---

✨ Today is …

성장을 위한 자세

사수를 잘 만나는 것이 자기 발전에 큰 영향을 있을 수 있지만
강사님의 얘기를 듣고 나니
결국은 발전하고자 하는 자신의 의지가 중요하다고 다시 한번 느꼈다

혜진님 같은 경우에는 매번 아침 일찍 출근해서
남는 시간에 공부를 하셨다고…
그런 적극적인 자세로 차근차근 성장해나가면
성과도 많이 쌓고, 적극적인 이미지도 많이 쌓을 수 있다고 하셨다

그리고, 무엇보다 중요한 연봉협상..!
자기 성과를 월별, 주간별로 미리 정리해서
연봉협상에서 어필하는 방법도 있다고 하셨다

💡 떳떳하게 자신을 증명하려면 사소한 것부터 지켜내자!!