css grid 조금 더 알아보기 1

▼▽ Grid가 처음이신 분들은 이전 포스팅을 한번 보시고 오시길 추천드립니다. :) ▼▽

 

2019/05/30 - [IT기록 - 개발자/CSS] - css grid 세상에서 가장 쉽게 이해하기

css grid 세상에서 가장 쉽게 이해하기

---

1. fr

grid 관련된 것들을 보다 보면 정말 많이 보이는 단위입니다. 대체 fr이 무엇을 의미하는 것일까요?

fr은 fraction의 약자로, '분수'라는 뜻을 가지고 있습니다.

 grid container의 공간을 일정 비율로 나누는 것을 의미합니다. 좀 더 쉽게 예시를 보며 살펴보겠습니다.

 

  See the Pen https://codepen.io/saea/pen/VOVqWr/">
  VOVqWr by kim jihae (https://codepen.io/saea">@saea)
  on https://codepen.io">CodePen.

 

 

3개의 column중에 1, 3번째 column은 40px로 고정되어 있습니다. 그래서 두 번째 column에는 1fr이 설정되어 양쪽 40px을 제외한 container의 나머지 공간을 1fr로 설정하여 화면의 width가 변하더라도 유연하게 늘어났다 줄어들었다가 할 수 있습니다. 이러한 기능은 우리가 따로 계산하거나 설정하지 않아도 자동으로 계산되어 보이기 때문에 시각적으로 적당한 길이를 찾는데에 매우 효율적일 수 있습니다. 

 

그렇다면 2fr은 무엇일까요?

맞습니다. 1fr의 두배만큼의 길이를 차지하는 것입니다. 예시를 보며 살펴보겠습니다.

 

  See the Pen https://codepen.io/saea/pen/KLrboP/">
  KLrboP by kim jihae (https://codepen.io/saea">@saea)
  on https://codepen.io">CodePen.

 

 

 

column의 container의 길이가 fr로 설정되어 4등분이 되었습니다. 그리고 각각 1번/3번 column에는 1fr만큼의 길이가 주어지고, 2번 column에는 두배의 길이가 주어졌습니다. 화면을 옮겨보면 가운데 column이 브라우저의 어떤 width에서도 일정하게 1번/3번 column의 두배가 되는 것을 확인할 수 있습니다.

 

2. grid-template 더 효율적으로 작성하기.

css에서 grid를 작성할 때, 우리는 기본적으로 다음과 같이 작성합니다.

display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);

하지만 매번 이렇게 작성하는건 귀찮다는 생각이 치킨 냄새처럼 올라옵니다. 그리고 우리는 좀 더 짧고 쉽게 하고 싶어 집니다. 모든 코더나 개발자들이 그랬나 봅니다. 얘도 짧게 쓸 수 있습니다.

display: grid;
grid-template: row-value, colums-value;
→ grid-template: repeat(2, 50px), repeat(3, 100px);

---

3. grid-line 간편하게 세는 법

 grid line 셀 때 좀 더 편하게 하는 방법이 있습니다. '음수'를 사용하는 것입니다. grid 찾아보면 이런 것 많이 보셨을 겁니다.

grid-column : 1 / -1 ;

'-1이 뭐야? !@#@$%#' 네, 제가 했던 생각입니다.

 저 -1이 맨 끝 column line을 의미하는 것입니다. 맨 끝이 몇 번째 line인지는 모르겠지만 하여튼 난 이 item container가 이 행을 다 차지했으면 좋겠다! 했을 때, 그냥 1/-1 이렇게 쓰시면 됩니다.