웹사이트에서 레이아웃을 잡기위해 css속성인 display flex와 grid를 많이 사용합니다.
그 중에서 grid는 2차원 요소를 레이아웃하는데 최적화 되어 있는데요.
flex는 1차원 요소를 레이아웃 하는데 최적화 되어 있습니다.
이런식으로 수평이나, 수직 구조를 디자인 하기에 정말 편하죠. flex만으로 구성하여 2차원 레이아웃을 구성할 수도 있지만
개발자는 항상 편하고 깔끔한 것을 추구합니다. 그래서 2차원 레이아웃을 구성하고자 할 때 우리는 grid를 사용해야 합니다.
그리드 컨테이너 내부에서는 이렇게 자유롭게 요소를 배치시킬 수 있죠
여기서 이 컨텐츠를 담는 박스를 grid container라고 합니다.
그리고 grid container 안에 들어가는 요소를 grid item이라고 부릅니다
우리가 이런 레이아웃을 가진 갤러리를 하나 만들어 본다고 해봅시다
컨텐츠를 grid 컨테이너에 배치해주기 위해서 먼저 담을 박스를 grid 라고 선언해주어야겠죠?
container라는 class 이름을 가진 div를 display grid 속성을 부여해줍시다.
grid 속성을 부여하면 해당 div 안에 영역은 이제 grid 영역이 됩니다. grid 영역안에 있는 모든 컨텐츠는 grid-cell로 분류됩니다
해당 사진을 보면 복잡해보이지만 3개의 열과 4개의 행으로 이루어져 있습니다
우리가 이런 갤러리를 만든다고 했을때, grid 컨테이너에게 몇 개의 열과 몇개의 행을 가질 것인지 이야기 해주어야 합니다.
그걸 결정하기 위해 container에 grid-template-colums와grid-template-rows를 사용해줍니다.
grid-template-colums에 이렇게 적어주면 각각의 열은 300px씩 3개가 생기게 됩니다.
만약 열을 4개로 만들고 싶다면 하나를 더 적어주면 되겠죠?
행도 마찬가지로 몇개의 행과 높이는 어떻게 할 것 인지 grid-template-row로 적어주면 되겠습니다.
만약 행이나 열이 100개씩있으면 이런식으로 100개를 다 적어야 할까요?
그래서 100개 대신 repeat라고 적어주고 몇개의 행 또는 열을 가지는지 숫자와 얼만큼의 길이를 가지는지 적어줍니다.
만약 직접 넓이와 높이를 부여하지 않고 똑같은 비율로 적용시키고 싶다면 1fr이라고 적어줍시다.
fr은 fraction의 줄인말로 한국어로 분수라고 할 수 있습니다.
이 뜻은 만약 container의 넓이가 900px이라면 3개의 열을 같은 1의 비율로 나타내니
각각의 열은 300px의 넓이를 가지게 됩니다.
만약 이런식으로 적는다면 그리그 박스의 전체 넓이에서 4를 나누고
각각의 열에 곱하기 1, 곱하기 2, 곱하기 1한 만큼의 넓이를 주게 됩니다. 비율의 개념이죠.
우리가 display grid라고 선언한 컨테이너 안에 12개의 div를 넣었다고 해봅시다.
그럼 아이템을 넣은 순서대로 이런식으로 들어가게 됩니다
우리가 위와같은 갤러리를 만든다고 할 떼
여기서 보면 1번과 4번, 8번과 11번, 9번과 12번이 합쳐져있죠? 이건 어떻게 할 수 있을까요?
그리컨테이너는 각각의 행과 열마다 라인이 있고 각각의 라인마다 번호가 있습니다
번호는 왼쪽부터 오른쪽 위부터 아래로 1번부터 시작합니다.
grid를 합쳐주기 위해서는 grid-row, 와 grid-column를 사용합니다
합쳐주고자 하는 컨텐츠(사진에서 예를들면 1번 아이템)를 class 혹은 id로 지정하여 선택하신 후
어디까지 합칠 것인지 영역을 지정해줍니다
예시에서 1번 4번을 한번 합쳐볼까요? 이 보라색 영역은 열 번호 1에서 2 행번호는 1에서 3을 차지합니다.
따라서 이런식으로 적어줄 수 있죠
이 밖에도 grid에서 제공하는 많은 기능이 있습니다
justify items, aline-item 등을 사용하여 그리드 아이템을 정렬하는 기능이나
grid-gap 혹은 gap을 사용하여 컨텐츠 사이에 컨텐츠 사이에 갭을 줄 수 있고
컨텐츠의 최소, 최대 길이를 지정할 수는 minmax도 지원해줍니다.
처음부터 그리드가 가지는 모든 속성을 순서대로 공부하는 하는 것 보다
그리드가 어떻게 동작하는지, 요소를 어떻게 배치시킬 수 있는지와 같은 기본적인 것만 잘 알고계시면
후에 그리드에 대해 더 깊게 공부할 때 수월하게 배우실 수 있습니다.
그리드를 실제 예제를 통해 연습하고 싶다면 해당 레이아웃을 한번 만들어보시면서 공부하면
크게 실력을 늘릴 수 있을거라고 생각합니다.