Grid Container

부트스트랩, 피그마 등에서 불리우는 그리드 시스템과는 조금 다른 얘기이다.
그리드 시스템에 대한 포스팅은 추후 할 예정이며, 우선적으로는 관련한 깃헙 레포를 첨부한다.
Sass + 그리드 시스템 활용

container

그리드의 컨테이너에 대해 알아보자.
컨테이너는 말 그대로 그리드를 담는 하나의 통이다. HTML의 element라면 어느 태그이든 그리드가 될 수 있지만 display: grid;를 설정해주어야 한다.

grid-teplate-columns

display: grid;
grid-template-columns: auto auto auto auto;

위에서 auto가 4개인 것은 column이 4개라고 하는 것이다. column이 3개일 경우 3개의 auto만 쓰면 된다. 그리고 반응형으로 같은 크기의 column들을 줄때 auto를 설정해주면 된다.

이와 다르게 특정하게 사이즈를 주고 싶을 때에는 다음과 같이 주면 된다.

display: grid;
grid-template-columns: 80px 200px auto 30px;

세 번째의 auto만 반응형적으로 크기가 늘어나게 되고 나머지는 고정되어있는 형태를 유지하게 된다.

grid-teplate-rows

grid-teplate-rows도 있다.

display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;

위의 예시를 보면 row의 크기는 그대로 유지되면서 column을 구성하는 각 그리드 아이템들의 폭이 변하게끔 구성한다.

justify-content

space-evenly는 각 그리드 아이템들이 가지는 영역을 수평에서 봤을 때 gap을 균등하게 가지게끔한다.

display: grid;
justify-content: space-evenly;
grid-template-columns: 50px 50px 50px;

space-around는 아이템들 사이의 공간을, 즉 column과 column들 사이의 공간을 일정하게 유지하게끔한다.

justify-content: space-around;

위의 1의 왼쪽 공간이나 3의 오른쪽 공간은 상관없이 아이템들 사이의 공간을 일정하게끔 해준다.

이외에도 space-between, center, start, end 등이 존재하는데, 이는 우리가 익히 아는 flex-box의 속성과 동일한 스타일링이므로 여기서는 다루지 않는다.

align-content

justify-content가 수평적 방향이라면 align-content는 수직적인 방향이다.
row 간격들이 일정하게 유지된다.

display: grid;
height: 400px;
align-content: space-evenly;
grid-template-columns: auto auto auto;

display: grid;
height: 400px;
align-content: center;
grid-template-columns: auto auto auto;

정리하자면 align-content는 각각이 row간의 간격을 지정하게 해주는 방법이고 justify-content는 column들간의 간격을 지정해주는 방법이다. 또한 row와 column의 폭은 auto로 지정해줄 수도 있고 고정된 값으로 지정해줄수도 있다.