grid 기본

1. repeat, fr

See the Pen Untitled by Donghwan Oh (@iamodh) on CodePen.

 

• grid-template-columns와 grid-template-row를 이용해 grid layout의 행과 열의 모양을 정할 수 있다.
• fr은 컨테이너 너비를 box가 해당 비율만큼 나누어갖는 것을 의미한다.
  
  • grid-template-columns가 1fr 3fr 100px 50%일 때 50%가 먼저 적용된 후 100px가 적용되고, 남은 공간을 1fr, 3fr이 나누어 가지는 것을 볼 수 있다.
• repeat 함수로 반복되는 fr을 나타낼 수 있다.
• grid-gap으로 box 안쪽 서로의 간격을 정할 수 있다.

2. minmax, auto

See the Pen grid-practice2 by Donghwan Oh (@iamodh) on CodePen.

 

• minmax로 그리드 아이템의 최소, 최대 크기를 정할 수 있다.
  • 위의 코드에서 1fr보다 min값인 50px이 크기 때문에 min이 적용된 것을 볼 수 있다.
• auto는 그리드 컨테이너에 맞춰 자동으로 크기를 조정한다.
• fr은 1fr 2fr 1fr 처럼 비율을 조정할 수 있는 반면 auto는 그렇지 못하다.
• fr과 auto를 같이 쓰게 되면 auto는 제대로 작동하지 않는다.

3. fit-content와 min-content, max-content

See the Pen grid-practice3 by Donghwan Oh (@iamodh) on CodePen.

• fit-content는 그리드 아이템의 크기를 내용에 맞춘다.
• fit-content(50%)처럼 박스의 최대 크기를 설정할 수 있다.
• word-break: keep-all로 줄바꿈으로 나누어지는 단어를 유지할 수 있다.

4. auto-fill, auto-fit

아이템의 개수를 알 수 없을 때 사용한다.

 

아이템의 너비의 합이 그리드 컨테이너의 너비를 초과할 때 오버플로우 대신 아이템이 다음 줄로 넘어간다. (반응형 그리드)

 

See the Pen grid-practice3 by Donghwan Oh (@iamodh) on CodePen.

• 400px 너비의 컨테이너에 min 너비가 150px의 박스 세 개를 넣을 수 없으니 Box3은 다음 줄로 이동한다.
• max 너비는 1fr이므로 Box1과 Box2는 같은 비율의 너비를 가지게 된다.
• 다른 줄의 Box 너비도 동일하게 적용된다.

auto-fill과 다르게 auto-fit은 부모 컨테이너 너비에 맞게 Box로 채운다. 

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

 

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

 

 

참고자료

https://uxkm.io/publishing/css/04-cssAdvanced/05-css_grid_part1#gsc.tab=0

그리드 레이아웃 - 요약, 함수, 단위 | UXKM