CSS Grid - 단위

 

 

 

fr

   - fraction, grid의 가로 길이와 세로의 길이를 비율로 나눌때 사용합니다.

   - 1:3:2 의 비율로 grid를 구성하려면 1fr 3fr 2fr 의 형식으로 만들 수 있습니다.

   - 절대길이와 함께 명시한다면, 남은 길이를 나눠갖게 됩니다.

      예를 들어 100px 1fr 2fr 이라고 하면 100px을 제외한 나머지 길이를 1:2 로 나눠갖게 됩니다.

 

 

 

min-content

   - 최소 content, 가장 최소한으로 차지할 수 있는 길이값입니다.

   - 내부 item의 크기에 딱 맞는 크기의 값만큼만 할당됩니다.

 

 

 

mas-content

   - 최대 content, 차지할 수 있는 최대한의 크기를 지정할 때 사용합니다.

   - 부모값에서 가장 최대한으로 차지할 수 있는 값을 얻습니다.

 

 

 

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

 

auto-fill

   - repeat 함수와 함께 사용합니다

   - 남는공간이 생길 때 개수를 증가시키고 싶을때 만듭니다.

   - 위의 코드블럭의 예시대로 한다면, column의 개수를 남는 공간에맞춰 자동으로 할당시키는 단위입니다.

 

 

auto-fit

   - 남는 공간을 꽉 채울 때 사용합니다.

   - 들어갈 수 있는 크기에 맞춰 크기를 조정합니다.

   - item들의 개수가 적을 때는 auto-fill의 경우 빈 공간이 생기지만, auto-fit을 사용하면 남는공간이 생기지 않습니다.

   - item들의 개수가 많을 경우 auto-fill과 차이는 거의 없습니다.

 

 

minmax( min, max )

   - 최소크기와 최대크기를 지정할 수 있습니다.

   - min보다 적어지진 않고, max값보다 더 커지지 않습니다.

   - repeat 함수와 함께 사용하여 repeat( auto-fill, minmax(100px, 1fr)) 이라 지정한다면,

      100px보다 큰 공간이 생길때마다 grid의 행 또는 열에 item이 추가됩니다.