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이 추가됩니다.
'웹 프론트 엔드' 카테고리의 다른 글
SASS (0) | 2024.03.23 |
---|---|
CSS 반응형 디자인 (0) | 2024.03.22 |
CSS Grid - 단일 아이템 속성 (0) | 2024.03.21 |
CSS Grid - 컨테이너 설정 (0) | 2024.03.20 |
CSS Grid (0) | 2024.03.20 |