TIL: 26일차 "CSS Grid -1-"

SCSS로 넘어가기전에, CSS에서 다루지 않았던 속성인 Grid에 대해 먼저 다뤄보려 한다.

Grid는 무엇인가?

grid는 사전적인 의미로서 "격자"라는 의미를 가지고 있는 영단어이다.
CSS에서 속성으로서의 grid는 레이아웃을 격자식으로 배치하기 위한 속성으로서 사용 된다.

Grid는 왜 사용하는가?

flex만으로도 꽤 많은것이 가능했다. 그렇다면 왜 grid를 사용 할 필요가 있을까?
우선 flex를 사용하는중 어떤점에서 어려운점이 되는지 먼저 알아보도록 하자.

위와 같은 사진에서, 5번을 뛰어넘고 6번 자리에 아이템을 놓고 싶다고 하면, flex만으로는 쉽지 않을것이다.
flex를 다루면서 배웠던 main axis와 cross axis를 따라 아이템을 배치하는것은 쉽겠지만, 원하는곳을 한정해서 아이템을 배치하는것이 쉽지 않기때문이다.

grid는 어떨까?
gird는 아이템을 격자식으로 배치하여, 아이템들 사이에 빈칸을 넣거나,

위와 같이 복잡한 배치를 하는것도 가능하다.

flex는 선에 따라 1차원적인 배치를 한다고 하면, grid는 면에 따라 2차원적인 배치가 가능한것이다.

Grid는 어떻게 사용하는가?

기본적으로는 flex처럼, 배치하고 싶은 컨텐츠의 상위, 즉 부모 컨테이너에 grid속성을 넣어 하위 컨텐츠를 움직이게 된다.

grid-template-column or row

우선적으로 사용하는 속성은 grid-template-column or row이다.
이 속성은 각각 grid에 행과 열의 크기를 정하는 속성이다.
이 속성에서 사용 할 수 있는 특별한 단위가 있는데, 그것이 fr이다.
fr은 특정한 수치가 정해져 있지 않는 단위로서, 남은 여유공간을 분수로 나누어 컨텐츠를 배치하고, 여유 공간을 실시간으로 계산하여 길이를 조정한다. 즉, 고정된 수치가 아닌, 반응형 단위 인것이다.
두번째는 repeat라는 함수이다. 이는 입력 된 수치를 반복해준다.
예를 들어서

container {
    grid-template-row: repeat(4, 1fr);
    grid-template-column: repeat(2, 100px);
}

과 같이 사용하게 되면, 가로열의 남은 공간을 4개로 나눈 만큼의 길이와 100px의 높이를 갖는 아이템을 4개씩 2줄, 8개를 배치 하는 코드가 된다.

Grid-template-area

grid-template-area는 css상에서 입체적으로 배치를 정할 수 있는 속성이다.
예를 들어서, 다음과 같이 배치를 하려 한다 하면,

container {
    grid-template-areas:
    "navigation navigation navigation"
    "section section section"
    "footer footer footer";
}

과 같이 배치 할 수 있다.
물론 그 전에, 배치하려는 각각의 속성에 grid-area속성으로 navigation section footer을 줘야한다.
만약 중앙을 비우고 싶다면, 하나의 속성을 지우고 .을 사용하면, 해당 공간은 비워진 상태가 된다.

다음 포스트에서는 grid-template-column or row와 grid-template-area를 축약한 grid-template와 그 이외의 속성에 대해 다뤄보도록 하자.

Grid를 연습하기 위해 약간의 게임을 할 수 있는 사이트가 있다.
게임을 하면서 grid에 대해 조금씩 더 알아가도록 하자.