$$config title: CSS grid keywords: - IT - CSS $$ # CSS 그리드 5분만에 배우기 (Learn CSS Grid in 5 Minutes) * 웹 레이아웃의 미래를 위한 퀵 튜토리얼 그리드 레이아웃은 웹사이트 디자인의 주요한 요소이고, CSS 그리드 모듈은 그것을 구현해줄 수 있는 가장 강력하고 쉬운 툴이다. 개인적으로, 부트스트랩같은 것들보다 훨씬 좋다. (그 이유는 여기) 또한 최근 이 모듈은 주요 브라우저(Safari, Chrome, Firefox, Edge)에서 기본적으로 지원하기때문에, 머지않아 모든 프론트엔드 개발자들은 이 기술을 배워야 한다고 생각한다. 이 글에서, 가능한 빠르게 CSS 그리드의 아주 기본적인 부분만 알아볼 것이다. 기초를 이해하는데 있어서 신경쓰지 말아야 될 부분은 제외한다. * 영상링크 [https://scrimba.com/learn/cssgrid](https://scrimba.com/learn/cssgrid) ## 첫번째 그리드 레이아웃 CSS 그리드의 두가지 주요 요소는 wrapper(부모 요소)와 items(자식 요소)이다. wrapper는 감싸주는 그리드이고 item들은 그리드 내부의 요소들이다. 부모 요소 내부에 6개의 자식 요소들이 있는 마크업을 살펴보자. ```css

``` 부모 div를 grid로 바꾸려면, display를 grid로 설정하면 된다. ```css .wrapper { display: grid; } ``` 하지만, 아직 그리드가 어떻게 보여야 할지 지정하지 않았기 때문에 아무런 동작을 하지 않는다. 단순히 6개의 div들이 쌓여있는 모습으로 보여질 것이다. (약간의 스타일링을 했지만 CSS 그리드와 관련된 작업은 아님) ## Column과 row 두개로 나누기 위해서, column과 row를 정의해줘야한다. 3개의 column과 2개의 row를 만들어보자. grid-template-row와 grid-template-column 프로퍼티를 사용할것이다. ```css .wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; } ``` grid-template-columns에 3개의 값, grid-template-rows에 2개의 값을 정의해주면 3개의 column과 2개의 row를 표현할 수 있다. 값들은 column의 너비(100px)와, row의 높이(50px)을 지정한다. 값에 따른 그리드의 표현을 제대로 이해 하기위해 이 예제를 살펴보자. ```css .wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 100px 30px; } ``` 코드와 레이아웃의 관계를 주목하자. 이 코드는 이렇게 보일 것이다. ## 아이템의 배치 다음으로, 아이템이 어떻게 배치 되는지에 대해 알아야 한다. 간단히 따라할 수 있기때문에, 레이아웃을 그리는데 큰 도움이 된다. 3x3 그리드를 만들어 보자. 이전 마크업을 그대로 사용한다. ```css .wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } ``` 아이템의 위치와 사이즈를 변경하기 위해 grid-column과 grid-row 속성을 지정해준다. ```css .item1 { grid-column-start: 1; grid-column-end: 4; } ``` 아이템1을 첫번째 그리드 라인부터 마지막 4번째 라인까지로 정의했다. 다르게 말하면, 전체 row를 사용한다는 뜻이다. 이렇게 표현 된다 : 여기서, 단지 3개의 column만 가지고 있는데 왜 4로 지정했는지 의아한 독자들이 있을것이다. Grid line에 대해 설명한 아래 그림을 보면서 이해해보자. 이제 그리드의 모든 row를 사용하고 있음에 주목하라. 첫번째 아이템이 전체 row를 차지하면, 나머지 아이템들은 아래로 밀려난다. 더 간단한 방법으로도 구현할 수 있다 : ```css .item1 { grid-column: 1 / 4; } ``` 이 개념을 명확히 이해하기 위해, 조금씩 바꿔보자. ```css .item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } ``` 이 코드는 실제로 이렇게 표현된다. 왜 이렇게 되는지 생각해보자. 어렵지 않을 것이다.