CSS) grid-column-gap

grid-column-gap

minmax()

• repeat와 같이 쓰면 좋다. 최소 간격과 최대 간격을 지정해줌

.gird {
 grid-template-columns: repeat(6, minmax(150px, 1fr));
}

auto-fill / auto-fix

• repeat()와 함께 사용된다. repeat()함수의 파라미터로 열 또는 행의 개수를 미리 지정해 주지 않고, 설정된 너비가 허용하는 한 최대한 셀을 채우게 된다

.gird {
 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.gird {
 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

• auto-fit: 그리드 컨테이너 내부에 공간이 남을 경우 그 공간을 각 셀들이 나눠 갖는다. 셀을 길이를 전체 너비에 맞게 늘린다.
• auto-fill: 그리드 컨테이너 내부에 공간이 남을 경우 셀들을 만들어 낸다. 빈 공간이 있더라도 셀의 길이를 늘리지 않는다.

결론: 만드는 반응형에 따라 grid-column-gap을 얼마나 주는지는 만든 사람의 마음. 단, 언제나 같은 간격을 원한다면 고정값으로, 아니라면 %값으로 주는 것 같음. 또한 minmax와 auto-fill/auto-fix을 사용해서 gap을 조정함.

⇒ 언제 얼마나 줘야하는지는 정말 본인 마음.