[디자인] 5분 안에 CSS Grid 배우기

미래 웹 사이트 레이아웃에 대한 간단한하고 빠른 튜토리얼 입니다.
그리드 레이아웃은 웹 사이트 디자인의 기본 요소이며 CSS 그리드 모듈은 웹 사이트를 만드는 가장 강력하고 쉬운 도구입니다. 나는 개인적으로 이것이 예를 들어 부트 스트랩 (여기를 읽으십시오)보다 훨씬 낫다고 생각합니다.
이 모듈은 올해 주요 브라우저 (사파리, 크롬, 파이어 폭스, 엣지)의 기본 지원을 받았기 때문에 모든 프런트 엔드 개발자는 그리 멀지 않은 미래에이 기술을 배워야 할 것이라고 믿습니다.
이 글에서는 가능한 한 빨리 CSS Grid의 기본을 살펴 보겠습니다. 나는 당신이 기본을 이해할 때까지 신경 쓰지 말아야 할 모든 것을 남겨 둘 것입니다.
또한 무료 CSS 그리드 과정을 만들었습니다. 여기를 클릭하면 전체 내용을 볼 수 있습니다.
또는 과정 전반에 걸쳐 배울 내용을 설명하는 이 글을 확인하십시오.

이제 시작합시다!

당신의 첫 번째 그리드 레이아웃

CSS Grid의 두 가지 핵심 요소는 wrapper (parent)와 items (children)입니다. wrapper는 실제 눈금이며 items은 눈금 안의 내용입니다.
여기에 6 개의 항목이있는 wrapper의 마크 업(markup)은 다음과 같습니다.
<div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
wrapper div를 그리드로 바꾸려면 gird를 표시하면됩니다.
.wrapper { display: grid; }
그러나 그리드를 어떻게 보이게 할 것인지에 대해서는 정의하지 않았으므로 아직 아무 것도하지 않습니다. 6 개의 div를 서로 쌓아 놓으면됩니다.
presentation

스타일을 약간 추가했지만 CSS 그리드와 관련이 없습니다.

Columns and rows 열과 행

2 차원으로 만들려면 열(columns)과 행(rows)을 정의해야합니다. 3 개의 열과 2 개의 행을 만듭니다. grid-template-rowgrid-template-column 속성을 사용합니다.
.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; }
grid-template-columns에 대해 세 개의 값을 작성 했으므로 세 개의 열을 얻습니다. grid-template-rows에 대해 두 개의 값을 지정 했으므로 두 행을 얻습니다.
값은 열(columns)이 (100px), 행(rows)이 원하는 (50px) 높이를 원하는 범위를 나타냅니다. 결과는 다음과 같습니다.
presentation
값과 그리드의 모양과의 관계를 올바르게 이해하려면이 예제도 살펴보십시오.
.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 100px 30px; }
코드와 레이아웃 사이의 연결을 파악하십시오.
방법은 다음과 같습니다.
presentation

Placing the items 항목 배치

다음으로 배울 점은 그리드에 항목(items)을 배치하는 방법입니다. 이것은 레이아웃을 만드는 것이 죽은 것처럼 보이기 때문에 당신이 초능력을 얻는 곳입니다.
이전과 같은 마크 업을 사용하여 3x3 격자를 만듭니다.
.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; }
그러면 다음 레이아웃이 생성됩니다.
presentation

페이지에서 3x2 그리드만 볼 수 있지만 3x3 그리드로 정의했습니다. 그리드를 채울 여섯 개의 항목만 있기 때문입니다. 우리가 세 개 더 있다면, 가장 낮은 행(row)도 채워질 것입니다.
항목(items)의 위치를 ​​지정하고 크기를 조정하려면 대상을 지정하고 grid-columngrid-row 속성을 사용합니다.
.item1 { grid-column-start: 1; grid-column-end: 4; }
여기에서 item1을 첫 번째 그리드 라인에서 시작하고 네 번째 컬럼 라인에서 끝내기를 원합니다. 즉, 전체 행을 차지합니다. 다음은 화면에서 어떻게 재생되는지 보여줍니다.
presentation
우리가 3 개의 컬럼(column)만 가질 때 왜 4 개의 컬럼(column) 라인이 있는지 혼란 스럽습니까? 이 이미지를 보시고 여기에서 검은 색으로 칼럼(column)을 그린 것입니다.
presentation
이제 우리는 그리드의 모든 행(rows)을 사용하고 있음을 주목하십시오. 첫 번째 항목(item)이 첫 번째 행(row) 전체를 차지할 때 나머지 항목(item)은 아래로 밀었습니다.
마지막으로 위의 구문(syntax)을 작성하는 간단한 방법을 보여 드리려고합니다.
.item1 { grid-column: 1 / 4; }
이 개념을 제대로 이해했는지 확인하려면 항목(items)을 조금 재정렬하십시오.
.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; }
이게 페이지에 보이는 방법입니다. 왜 이렇게 보이는지 주위를 둘러 보려고 노력하십시오. 너무 어려워서는 안됩니다.
presentation

그리고 이게 끝입니다.!!!!!

또한 Flexbox에 대한 자습서를 게시 했으므로 다른 멋진 CSS 모듈을 배우고 싶다면 체크해보십시오.
[디자인] 5분 안에 Flexbox 배우기



번역글 추천(신청) 받습니다.

PS. 안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일정고 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.

이 글은 번역글입니다.