지난 시간에 이어 이번에는 본격적으로 그리드가 무엇이며 우리가 왜 쓰는 지에 대한 이해를 해 볼 예정이다. 그 이후 내가 해당 프로젝트를 하면서 그리드를 어떻게 사용했는 지 플렉스와 직접 구현된 것의 차이를 살펴보도록 하겠다.
1. 그리드의 구성
CSS Grid는 CSS Flex와 같이 Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분되어 있다.Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있습니다.
1) 그리드 컨테이너 프로퍼티
Grid Container를 위한 속성들은 다음과 같다.
2) 그리드 아이템 프로퍼티
사실 여기는 이렇게 많은 속성들이 있지만, 대략적으로 많이 쓰는 것은 한정적이다. 따라서 아래의 사용법을 익혀두는 것이 더 실용적인 방법이다. 이후에 필요하다면, 그에 따라 구글링 후 찾아서 적용하면 되겠다.
2. 그리드의 사용법 및 실제 구성법
<1. 그리드 컨테이너>
1)display
그리드는 컨테이너로 해당 아이템들을 감싸줘야 한다. 따라서 컨테이너에 대한 정의가 필요하다. 이후 정의된 컨테이너의 자식 요소들은 그리드의 아이템으로 자동 정의 된다.
따라서 정리하자면, 그리드 사용을 위해서는 컨테이너에 필수로 작성해야 한다!
.container {
display: grid;
}2)grid-template-rows
그리드 역시 플렉스와 마찬가지로 로우와 콜럼을 통해 아이템들이 움직이긴 한다. 다만, 그리드는 행과 열이 함께 움직이는 2차원 적인 구성이기 때문에 로우와 콜럼을 동시에 설정해 줘야만 하겠다. 먼저, 로우 열이 어떻게 설정되는 지에 대해 한 번 살펴보자.
명시적 행(Track)의 크기를 정의.
동시에 라인(Line)의 이름도 정의 가능.
fr(fraction, 공간 비율) 단위를 사용할 수 있다.
repeat() 함수를 사용할 수 있다.
사용방법은 grid-template-columns와 같다.
각 라인은 행(Row, Track)과 열(Column, Track)의 개수대로 숫자(양수/음수) 라인 이름이 자동으로 지정되어 있어서, 꼭 필요한 경우가 아니면 라인 이름을 정의할 필요가 없다.
이처럼 그리드는 격자 형식으로 해당 행과 열에 대해 정의를 통해 해당 자식 요소인 아이템들을 배치하는 것이 가능하다.
3)grid-template-columns
명시적 열(Track)의 크기를 정의한다.
동시에 라인(Line)의 이름도 정의할 수 있다.
fr(fraction, 공간 비율) 단위를 사용할 수 있다.
repeat() 함수를 사용할 수 있다.
사용 방법은 grid-template-rows와 같다.
만약 1200px 너비의 ‘12컬럼 그리드 템플릿’을 정의한다면 어떻게 작성될까?
물론 위와 같이 표현할 수도 있지만, 귀찮지 않은가? 그래서 12개의 열 크기를 하나씩 지정하는 경우에는 입력 관리가 많아질 경우 힘들 수 있다. 이럴 때 사용하는 것이 repeat함수다. 그러면 바로 밑의 식처럼 훨씬 간결해진 코드를 만들 수 있다.
컬럼의 크기를 fr단위를 사용해 다음과 같이 비율로 지정할 수 도 있다. 각 컬럼은 비율에 맞게 출력되기 때문에 컨테이너의 너비가 가변해도 열 크기를 수정할 필요는 없다.
이처럼 그리드는 화면안에서 보다 자율적으로 위치및 배열이 가능한 2차원적인 css 속성이다. 이를 잘 활용한다면 플렉스보다 훨씬 간결하게 웹에서 레이아웃 조절이 가능하다는 것을 알 수 있다. 자 그러면 4 부에서는 어떻게 내가 이번 프로젝트를 다시 그리드로 적용했는 지 실전 예제를 통해 설명하겠다.
---------------------다음 부에서 계속 ----------------------
