https://vgpena.github.io/using-css-grid-the-right-way/

 

Use names. Use frs. Don't use a grid system. Wait, what? 

 

CSS Grid는 견고하고 유연하며 다른 CSS 레이아웃 시스템에서 상쾌한 패러다임으로 이동합니다. 이것들이 Grid를위한 판매 포인트이지만, 또한 배우기가 어렵습니다.

 

"학습"CSS 그리드는 외형이나 행동의 한 측면을 설명하는 것이 아니라 완전히 새로운 레이아웃 시스템을 제공하는 많은 새로운 속성에 대한 실무 지식을 개발해야합니다. 이 시스템은 CSS 사양에서 거의 볼 수없는 패러다임과 구문을 사용하는 약 18 개의 속성을 포함합니다.

 

이는 CSS Grid가 상당히 높은 기술 수준을 가지고 있음을 의미합니다. 개발자는 새로운 정보를 효과적으로 배우고 내면화해야합니다. 일단 기술 수준보다 높다면, 그리드는 레이아웃 생성에서 놀라운 맹방입니다. 그 기술 수준 아래에서, 그리드는 걸림돌입니다. 작은 보상을 위해서 많은 추가 작업이 필요할 것 같으므로, 왜 당신이 그것을 사용하는 것을 귀찮게하는지 궁금 할 것입니다.

 

이 글에서는 Grid 스팩을 활용하는 가장 효과적인 방법을 보여줌으로써 기술 스킬을 극복하는 데 도움을 드리고자합니다. 이 스펙을 완전히 다루지는 않지만, 이와 비슷한 것을 보려면이 CSS Tricks 포스트를 참고하십시오. 여기서 다루고있는 것은이 레이아웃 시스템의 유용한 측면입니다.

 

Use names, not numbers

 

가장 기본적인 그리드 열과 행은 숫자로 참조됩니다. 예를 들어,이 CSS는 두 개의 열이있는 눈금을 설정하고 페이지의 주 콘텐츠를 두 번째 열에 배치합니다.

 

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

 

.content {
    grid-column: 2;
}

 

이 방법은 효과가 있지만 그리드의 놀라운 기능이 빠져 있습니다. 행과 열에 특정 이름을 붙일 수 있습니다. 가능할 때마다 이를 활용해야 합니다.

다음은 이름을 사용하도록 조정 된 동일한 CSS입니다.

 

.container {
    display: grid;
    grid-template-columns: [sidebar] 1fr [content] 2fr;
}

 

.content {
    grid-column: content;
}

 

이와 같이 가벼운 경우에도 그리드 영역의 이름을 지정하는 것이 유리합니다.

 

Benefits

 

그리드에 이름을 추가하면 두 가지 주요 이점이 있습니다.

가독성 - 바로 박쥐를 사용하면 코드를 더 쉽게 이해할 수 있습니다. 3 행은 이제 Grid 컨테이너 내부에서 진행되는 모든 작업을 설명합니다. 열을 나열하는 것이 아닙니다. 각 열의 의도를 요약합니다.

7번째 라인(grid-column: content;)은 또한 더 잘 설명됩니다. 이전에는 .content가 두 번째 열에 있다는 것을 알았지 만 더 이상 컨텍스트가 없다는 것을 의미하지는 않습니다 - 3 열 중 2 번째 열은? 200개중 2? 그러나 열 이름을 지정하면 이 요소가 더 큰 시스템 내에서 구체적으로 설명되었음을 알립니다. 이름 지정을 사용하면 원래 열 선언을 쉽게 찾을 수 있습니다.

미래 보장 - 이름을 추가하면 CSS의 유연성이 향상됩니다. 특히, .content를 편집 할 필요없이 .container를 반복 할 수 있습니다.

콘텐츠 및 사이드 바의 시각적 순서를 바꾸고 싶습니까? 쉬운가요?

 

.container {
    display: grid;
    grid-template-columns: [content] 2fr [sidebar] 1fr;
}

 

.content {
    grid-column: content;
}

 

다른 열을 추가하고 싶습니까? 아무런 문제 없습니다.

 

.container {
    display: grid;
    grid-template-columns: [related-posts] 1fr [sidebar] 1fr [content] 2fr;
}

 

.content {
    grid-column: content;
}
 

명명 된 열을 사용하지 않으면 7 행의 열 번호를 업데이트하여 3 행의 변경 사항을 반영해야합니다. 명명 된 열은 .content의 일관된 동작을 열 개수 나 순서와 관계없이 부여합니다.

 

Use fr as your flexible unit

 

CSS Grid는 fr 단위를 도입하여 사용 가능한 총 공간의 일부를 차지하도록 영역을 알려줍니다. fr은 Grid 사양의 부작용처럼 보일 수 있지만 실제로는 필수적입니다.

 

fr 단위는 % 단위 또는 vw와는 다른데, 그 이유는 후자의 단위가 100 단위 전체의 부분을 설명하지만 fr은 이미 다른 것으로 사용되지 않은 공간으로 정의되기 때문입니다. frs는이 공간을 서로에 대해 상대적으로 나눕니다.

 

여기에서 content 열은 sidebar 열의 두 배입니다.

 

.container {
    display: grid;
    grid-template-columns: [sidebar] 1fr [content] 2fr;
}

 

.content {
    grid-column: content;
}

 

비 fr 단위와 총 3 개의 fr이 없으므로 1fr = 격자 너비의 ~ 33 %입니다.

 

Benefits

 

fr 단위는 다른 유연한 단위에 부족한 몇 가지를 제공합니다.

 

가독성과 명확한 의도 - 퍼센트를 사용하는 것과 달리 fr을 사용하면 전체에 비례하지 않고 서로에 대해 상대적으로 크기가 정해지는 정수를 고수 할 수 있습니다. 이렇게하면 의도 한 동작이 명확하게 유지됩니다. 예를 들어, 3 행은 영어로 번역하기가 쉽습니다. "내용은 사이드 바의 두 배입니다."

 

fr은 또한 백분율을 사용하여 계산 (및 읽기)하기가 어려울 정도로 공간을 분할 할 수있게 해줍니다.

 

.container {
    display: grid;
    grid-template-columns: [sidebar] 3fr [content] 4fr;
}

 

적은 수학 - fr의 가장 큰 장점은 개발자로부터 정확한 산술 연산을 수행하는 책임을지고 브라우저의 레이아웃 엔진으로 넘겨주는 것입니다. 예를 들어 CSS Grid를 사용하여 동일한 레이아웃을 만드는 두 가지 방법을 보여주는 CodePen이 있습니다.

 

이 라인은 데모의 핵심입니다.

 

.percents, .frs {
    display: grid;
    grid-column-gap: 20px;
}

.percents {
    grid-template-columns: repeat(3, calc((100% - 40px)/3))
}

 

.frs {
    grid-template-columns: repeat(3, 1fr);
}

 

7 행의 코드는 작성하기가 어렵고 읽기가 어려우며 부서지기 쉽지 않습니다. grid-column-gap 또는 column 수에 대한 변경은 수동으로 열 너비를 일치시키지 않는 한 레이아웃을 깨뜨릴 것입니다.

 

11 행은 간격 크기를 무시할 수 있으며 열 개수를 업데이트하면 새 계산이 필요하지 않습니다. 읽고 쉽게 읽을 수 있습니다.

 

Don’t use a grid system

 

이 모순 된 소리가 나는 권장 사항은 CSS Grid 사양을 뛰어 넘고 웹 디자인 작동 방법과 개발자가 디자이너 및 작업과 어떻게 상호 작용하는지에 대한 정보를 제공합니다.

 

레이아웃은 종종 그리드 시스템을 따라 정렬 된 요소로 이해됩니다.

 

 

일반적으로 개발은 설계와 정확한 일치를 위해 노력합니다. 디자인이 14- 칼럼 그리드를 기반으로한다면, 개발은 코드에서 일종의 14- 칼럼 그리드를 설정하고 칼럼을 1, 2, 3, 6 등의 칼럼으로 만드는 헬퍼 클래스를 작성합니다. 부트 스트랩과 같은 대부분의 프론트 엔드 프레임 워크는 이러한 방식으로 작동합니다.

 

위의 예에서 배치하고 크기를 지정할 다음 요소가있는 14 열 그리드가 있습니다.

 

1. 열 2에서 시작하여 열 12 개에 걸쳐있는 머리글
2. 사이드 바는 2 열에서 시작하여 4 열로 확장됩니다.
3. 주요 내용은 6 열에서 시작하여 8 열까지입니다.

CSS Grid에서는 디자인을 모방 한 시스템을 쉽게 설정할 수 있습니다.

 

.main {
    display: grid;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
    grid-template-rows: [header] 100px [body] auto;
    grid-template-columns: repeat(14, 1fr);
}

 

.header {
    grid-row: header;
    grid-column: 2 / span 12;
}

 

.sidebar {
    grid-row: body;
    grid-column: 2 / span 4;
}

 

.content {
    grid-row: body;
    grid-column: 6 / span 8;
}

 

그러나 이것은 실제로 좋은 계획입니까? 1 : 1 복제에 대한 우리의 시도에는 두 가지 단점이 있습니다.

 

첫째, 우리는 열 이름을 기획합니다.  또한 14 개의 열 중에서 2, 5, 6, 13 열만 "사용하고 있습니다. 기술적으로는 효과가 있지만 신호 대 잡음 비율은 좋지 않습니다.

 

원래 디자인에서 몇 단계를 거치면 이러한 두 가지 문제가 해결됩니다.

 

.main {
    display: grid;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
    grid-template-rows: [header] 100px [body] auto;
    grid-template-columns: [left-gutter] 1fr [sidebar] 4fr [content] 8fr [right-gutter] 1fr;
}

 

.header {
    grid-row: header;
    grid-column: sidebar / right-gutter;
}

 

.sidebar {
    grid-row: body;
    grid-column: sidebar;
}

 

.content {
    grid-row: body;
    grid-column: content;
}

 

이제 14 개의 열이 있는 대신 4 개의 열만 만들었지 만 측면 공간을 14 개의 부분으로 나눕니다. 우리는 첫 번째 반복에서와 똑같은 시각 효과를 갖지만 코드는 시끄럽지 않고 사용 방법을 직접 반영합니다.

 

우리는 레이아웃 전반에 걸쳐이 패러다임을 계속할 수 있습니다. .content 요소 내에서 주 기사 옆에 보조 정보 (작성자 약력, 광고 문안 등)가 필요하다고 가정 해보십시오.

 

 

우리가 14-칼럼 그리드를 철저히 준수한다면, 우리는 다음과 같은 것이 필요합니다.

 

.content {
    grid-row: body;
    grid-column: 6 / span 8;
}

 

.article {
    grid-column: 7 / span 4;
}

 

.info {
    grid-column: 11 / span 12;
}

 

CSS Grid에는 상속의 개념이 없으므로 어느 것이 까다로울 것입니다. .info는 그물 조부모 인 .main에 설정된 그리드에 대해 아무것도 모릅니다.

 

그러나 리터럴 14 열 그리드를 놓아 버리면 .article과 .info는 최상위 레벨 그리드에 대해 알 필요가 없습니다.  이 요소는 .content 내부의 새로운 그리드의 일부입니다 .

 

.content {
    grid-row: body;
    grid-column: content;
    display: grid;
    grid-template-columns: [left-gutter] 1fr [article] 4fr [info] 2fr [right-gutter] 1fr;
    grid-column-gap: 2rem;
}

 

.article {
    grid-column: article;
}

 

.info {
    grid-column: info;
}

 

이 설정을 사용하면 .content는 간단하고 내부적으로 일관되지만 .main에 설정된 외부 열과도 완벽하게 정렬됩니다.

 

Benefits

 

앞에서 설명한 내용 외에도 원래 디자인 시스템을 더 철저히 준수하면 개발자로서 우리의 전문성과 도구 인 브라우저를보다 효과적으로 활용할 수 있습니다. 픽셀 및 열은 관계 및 비례 공간보다 덜 중요합니다.

 

.article이 7 열에서 시작하고 .info가 11 열에서 시작한다는 것은 중요하지 않습니다. 입자는 .info의 두 배입니다. 비례 적으로 요소를 생각하고 서로 상호 작용하는 방법을 질문하면 동적 시스템으로 레이아웃을 처리하는 데 도움이됩니다.

 

Sidenote: Nesting Markup

 

이 섹션의 코드 샘플에서 알 수있는 한 가지 사항은 왼쪽 거터 및 오른쪽 거터 열의 사용법입니다. 이 CSS는 가장 평평한 HTML이 가능하다고 가정합니다.

 

<div class="main">
    <div class="header"></div>
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

 

.main {
    display: grid;
    grid-template-columns: [left-gutter] 1fr [sidebar] 4fr [content] 8fr [right-gutter] 1fr;
}

 

래퍼 div를 마크 업에 넣으려는 경우 요소 당 더 적은 수의 열을 사용하여보다 직접적인 CSS를 작성할 수 있습니다.

 

<div class="main">
    <div class="wrapper">
        <div class="header"></div>
        <div class="sidebar"></div>
        <div class="content"></div>
    </div>
</div>

 

.main {
    display: grid;
    grid-template-columns: [left-gutter] 1fr [wrapper] 12fr [right-gutter] 1fr;
}

 

.wrapper {
    grid-column: wrapper;
    display: grid;
    grid-template-columns: [sidebar] 1fr [content] 2fr;
}

 

두 번째 접근법은 수학이 더 간단하기 때문에 본질적으로 더 나은 것으로 느낍니다. 숫자를 14로 늘리고 1 : 2 비율을 생각하면 최대한 빨리 걱정할 필요가 없습니다. 이것은 CSS Grid의 정신에 충실합니다.

 

CSS 격자에 사실이 아닌 것은 .wrapper div를 추가하는 것입니다. Google은 콘텐츠와 프리젠 테이션을 구분하는 데 도움이되도록 열심히 노력합니다. 즉, 스타일을 적용하거나 '잘 작동'하기 위해 요소를 추가 할 필요가 없습니다. 따라서 적어도 오늘은 CSS 그리드 스타일링의 유일한 목적을 위해 마크 업을 추가하거나 변경하지 말 것을 권장합니다.

 

Coda

 

CSS 그리드 여행을 나와 함께 해주셔서 감사합니다! 저는 지난 몇 달 동안 그것을 사용하고 사랑해 왔습니다. 그리고 이것이 당신이 이해하고 그것을 당신의 목적에 사용하는 데 도움이되기를 바랍니다.

소개에서 내 포인트를 되풀이하기 위해 CSS Grid는 사용하기 쉽지만 배우기는 어렵습니다. 다른 CSS 레이아웃 기술보다 더 직관적 인 패러다임이지만 이전 제품과 완전히 다릅니다.

이 모든 것을 말하기 : 필요한만큼 그리드를 가져옵니다. 스펙을 읽는 것만으로 모든 것을 이해하려고 시도하지 마십시오. 간단한 예제를 설정하고 웹 인스펙터를 열고 (특히 파이어 폭스에서!), 자신에게 친절하십시오.

 

그만한 가치가있을것 같습니다.