grid 마지막 시리즈로 grid 관련 함수와 키워드에 대해 다루어 보려고 한다.
이번 포스팅에서 다룰 함수나 키워드는 그리드 제작을 편리하게 만들어준다.
repeat()
repeat를 쓰면 반복적인 grid template를 간단하게 나타낼 수 있다.
예를 들어 grid-template의 columns(열)을 1fr크기로 3개를 만들고 싶다면
아래와 같이 나타낼 수 있다.
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(5, 1fr); /*repeat로 간단하게 나타낼 수 있다*/
repeat는 두가지 인수를 받는다.
- 첫번째 인수 : 반복 횟수
- 두번째 인수 : 크기 지정 (2개 이상의 값 작성 가능)
두번째 인수에서 값을 2개 이상 작성하면, 해당 값이 반복되어 나타난다.
만약 10개의 열을 만들고 싶고, 1fr, 2fr 크기가 반복시키고 싶다면 아래와 같이 작성하면 된다.
grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr;
grid-template-columns: repeat(5, 1fr 2fr); /*1fr, 2fr 열이 반복해서 출력, 총 10개 열 생성*/
repeat 첫번째 인수에는 정수 말고도 키워드가 들어갈 수 있다.
첫번째 인수로 들어갈 수 있는 키워드는 총 6가지이다.
- auto-fill : 사용 가능한 공간을 채울 수 있는 만큼의 행 또는 열을 생성
- auto-fit : 내용에 맞게 행 또는 열의 크기를 조정하여 사용 가능한 공간을 최대한 활용
- minmax(min, max) : 최소 크기와 최대 크기를 지정하여 그리드 행 또는 열의 크기를 제한
- fit-content : 콘텐츠의 크기에 맞춰 그리드 행 또는 열의 크기를 조정
- max-content : 콘텐츠의 최대 크기에 따라 그리드 행 또는 열의 크기를 조정
- min-content : 콘텐츠의 최소 크기에 따라 그리드 행 또는 열의 크기를 조정
auto-fill
사용 가능한 공간을 채울 수 있는 만큼 열 또는 행을 생성한다.
공간이 남으면 추가로 빈 열을 생성한다.
grid-template-columns: repeat(auto-fill, 100px);
auto-fit
사용 가능한 공간을 채울 수 있는 만큼 열 또는 행을 생성한다는 점에서는 auto-fill과 유사하나,
auto-fill과 달리 공간이 남아도 빈 행 또는 열이 생성되지 않는다.
grid-template-columns: repeat(auto-fit, 100px);
minmax(min, max)
최소, 최대 크기를 지정할 수 있다.
아래 코드에서는 최소 100px, 최대 1fr 사이즈의 열 4개를 생성한다.
grid-template-columns: repeat(4, minmax(100px, 1fr));
fit-content
콘텐츠의 크기에 맞춰 열 또는 행을 조정할 수 있다.
인수를 한 개 가지며, 해당 인수는 열이 가질 수 있는 최대 크기를 나타낸다.
아래 코드에서는 콘텐츠의 크기에 맞춰 열의 크기를 조정하며, 각 열은 최대 100px의 크기를 가진다.
grid-template-columns: repeat(4, fit-content(100px));
max-content / min-content
max-content는 콘텐츠 최소 크기에 따라 열 또는 행의 크기를 조정한다.
min-content는 콘텐츠 최대 크기에 따라 열 또는 행의 크기를 조정한다.
grid-template-columns: repeat(4, max-content);
grid-template-columns: repeat(4, min-content);
(CSS) grid 5탄 : grid와 grid item 배치법, align & justify-item, align & justify-self, align & justify-content 사용법
이번 포스팅은 grid와 grid item 배치 방법에 대해서 포스팅하고자 한다. grid item과 grid 배치법을 나누어서 설명하고자 한다. grid-item 배치법grid-item 배치에는 아래 요소를 사용할 수 있다. 주의
lemu-devblog.tistory.com
