둘 다 부모(container)가 자식(item)에게 grid를 적용함을 알린다. display: block;과 display: inline-block;의 관계와 비슷하다.
grid-template-columns
column의 너비와 개수를 정한다.
grid-template-columns: 100px 100px 100px 100px;는너비가 100px인 column이 네 개라는 뜻이다.grid가 화면 너비에 맞춰 옆으로 늘어나게 하고 싶다면, px(픽셀)로 지정하는 대신 auto를 집어넣으면 된다.즉 grid-template-column: auto auto auto auto;는 너비를 자동(꽉 채움)으로 설정한 column이 네 개 있다는 의미다.
grid-template-rows
row의 높이와 개수를 정한다.
grid-template-rows: 100px 100px 100px 100px;는높이가 100px인 row가 네 개라는 뜻이다.grid-template-rows: auto auto auto auto;는 이렇게 된다.grid-template-rows: auto auto 100px 100px;도 마찬가지다.
추가 속성
반복(repeat)
이 격자의 CSS 코드는 아래와 같다.grid-template-columns에서 250px이 세 번 반복돼, 작성에 비효율적이다.그냥 노가다 하면 되지 않냐고?만약 column 수가 아주 많고, 전부 50px로 지정해놨는데70px로 바꿔야 하는 상황이 되면 아주 귀찮아진다.이 때 grid-template-columns: repeat(반복 횟수, 너비);의 형태로 작성하면노가다와 똑같은 결과물이 나온다!
minmax
minmax는 최소 크기와 최대 크기를 정해준다.minmax(50px, 150px)는 column의 너비가 50px(최소)~150px(최대) 사이를 유지하게 만든다.화면 너비가 좁아져도 50px보다 더 줄어들지는 않으며(초과하면 스크롤 처리됨)화면 너비가 넓어져도 150px보다 더 늘어나지 않는다.최대 너비를 1fr으로 변경하면 화면 너비만큼 가득 채우게 된다.item을 추가하면
auto-fill
auto-fill은 화면 너비에 따라 자동으로 column을 생성한다.html상으로는 item이 5개지만개발자도구를 확인해보면 빈 공간에 column이 더 있다.화면 너비에 따라 생성되는 column의 수가 다르며생성된 column들은 기존의 column들과 똑같은 너비로 만들어진다.item을 추가하면비어있던 column이 item으로 채워진다.
auto-fit
auto-fit은 화면 너비에 따라 자동으로 column 너비를 늘린다.auto-fill과 달리 전체 item의 수가 변하지 않는다.화면 너비를 최소화 했을 땐, minmax때문에 auto-fill과 비슷해 보이지만화면 너비를 늘리면 item도 가로로 늘어나 화면을 꽉 채운다.item을 추가하면기존 item들이 너비를 줄여 새 item들과 공간을 나눠 갖는다.
max-content와 min-content
max-content와 min-content는 말 그대로 내부 content에 맞춰 부모의 크기를 변경한다.왼쪽 max-content, 오른쪽 min-content
