노션 렉걸려서 임시 페이지 작성

4. CSS - Grid Function, Units

4.1 repeat

repeat(반복되는 개수, 크기) 으로 반복된 크기를 입력할 때 사용

4.2. minmax

minmax(최소너비, 최대너비): grid Item 요소의 최소너비와 최대너비를 한 번에 지정하는 함수

• 사용예시 1
grid-template-columns: minmax(100px, 1fr), minmax(200px, 1fr);

• container 너비가 충분히 클 때는 1fr, 1fr로 1:1 비율을 유지하다가, container넓이가 계속해서 작아지면, 2번 item은 200px을 유지하고, 1번 아이템만이 줄어들어 100px까지 줄어들게 된다.

• 사용예시2
grid-auto-rows: minmax(100px, auto)
• grid-auto-rows는 암시적으로 생기는 행들의 높이를 지정하는 속성이다
• 즉 여기서, 추가되는 Item들은 행의 높이를 최소 100px을 가지게 되고, 그 이상의 경우 auto를 통해 입력되는 height 값을(3번 Item의 200px)을 그대로 사용할 수가 있다.
• 만약 minmax(100px, auto)가 없이 100px이었다면, 3번 item은 잘려서 나올 것이다.

4.3 fit-content( -px)

content의 너비에 맞추돼, 최대 -px 값까지 늘어날 수 있다. (-px 넘으면 줄바꿈처리)

• 사용예시1
grid-template-columns: fit-content(300px) fit-content(300px)
• 상황
• 2번 아이템의 글자가 길어져 아이템 밖으로 튀어나오고 있는 상황



• 적용 후
• 1번은 content에 맞게 너비가 꽉 차게 되었고,
• 2번의 경우 최대 300px에 도달하여, 줄바꿈 처리가 적용되었다.

4.4 Grid함수들 정리

• Container에 적용할 수 있는 옵션들로, 행과 열의 크기를 지정하는 속성
• grid-template-rows, grid-template-columns

• 추가적인 Item들에 대하여 암묵적인 크기를 지정하는 속성
• grid-auto-rows, grid-auto-columns

• reapeat(횟수, 너비) , minmax(최소값, 최대값), fit-content(제한 너비값)

4.5 Grid에서 사용하는 단위 ( fr )

fr은 공간너비비율 을 뜻하며, fraction의 줄임말로남은 공간에 대한 비율을 가져가도록 하는 단위이다.

• 사용예시
grid-template-columns: 100px 100px 1fr 2fr
• 상황
• 적용 후



 

4.6 min-content, max-content

ㄴ

• 사용예시
grid-template-coulmns: repeat(4, min-content)
• 상황
• text 자리가 없어서 줄바꿈 처리 된 상황



• min-content 적용 후
• 영어의 경우 띄어쓰기 단위로 최소 content를 파악하게 된다. 한글의 경우 1글자 단위 인식
• 한글도 띄어쓰기 단위로 사용하려면, word-break:keep-all 속성 적용



• max-content 적용 후
 

4.7 auto-fill, auto-fit

auto-fit은 item의 최대크기를 기준으로 공간에 맞게 개수 배치, auto-fill은 item의 최소크기를 기준으로 공간에 맞게 개수 배치

• 사용예시2
grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
• 상황
• container 최소로 줄이게 되면, item들이 열을 지키며, 유동적으로 움직이지 않는다.



• auto-fit 적용 후
• 열의 개수가 container의 크기에 맞게 자동으로 조절된다.
• 크게 했을 경우, 1줄에 전부 담기게 됨



 
• auto-fill 적용
• 최소넓이로 개수만큼만 생기고 나머지 빈공간 처리



 

4.8 정리