CSS 그리드 사양을 읽은 11 가지 사실

Alex Kunchevsky의 일러스트레이션

2017 년 6 월 11 일, CSS Grid 사양을 읽기로 결정했습니다.

사양은 약간 기술적 인 것이었지만 지금까지 내가 가장 즐거웠 던 사양이었습니다. 고급 개발자라면 나중에 참조 할 수 있도록 즐겨 찾기에 추가하십시오.

도움이 되겠습니까?

나는 훌륭한 엔지니어와 훌륭한 엔지니어의 차이점은 후자가 실제로 어떤 일이 일어나고 있는지 이해하는 데 시간이 걸린다는 것입니다. 그들은“복사하여 붙여 넣기”를 배우는 대신 일이 어떻게 작동하는지 배웁니다.

훌륭한 개발자가되고 싶습니까?

그럼 당연하지. 또는이 기사를 읽지 않을 것입니다.

당신이 배울 것

사양을 읽는 동안 매우 미묘하지만 심오한 세부 사항을 배웠습니다.

이 기사에서는 그것들을 당신과 공유 할 것입니다.

1. CSS 그리드는 선언적입니다

선언적 API는 작업하기에 너무 달콤합니다. ReactJS를 생각하십니까?

웹 사이트가 간단한 문서에서 복잡한 대화 형 응용 프로그램으로 발전함에 따라 웹 레이아웃을 작성하기가 어려워졌습니다. 너무 어려워서, 그들은 나의 악몽이었습니다.

이것이 바로 CSS Grid가 오늘 해결 한 문제입니다.

사양에서.

CSS 그리드는 지능적인 레이아웃 제작 과정을 번거 로움없이 처리하여 프로세스를 거의 수월하게 만들어주는 아름다운 선언적 규칙으로 대체합니다.

CSS 역사상 좋은시기입니다.

2. 분수 단위가 항상 같은 간격의 행과 열을 생성하지는 않습니다.

모든 사람들이 CSS 그리드에 대해 배우고 좋아하는 것 중 하나는 분수 단위입니다. 오리조차도 도망 갈 수 있습니다.

분수 단위는 백분율 계산의 고통을 없애줍니다. 함께 일하게되어 기쁩니다.

대부분의 사람들은 분수 단위 (fr)가 동일한 간격의 열 또는 행을 산출한다고 가르칩니다.

예를 들어 1fr 1fr 1fr과 같은 선언은 동일한 간격의 열 또는 행을 제공합니다. 아래 그림을 참조하십시오.

분수 단위로 작성된 동일한 간격의 열.

슬프게도, 항상 그런 것은 아닙니다. 불쌍한 오리.

다음은 사양에서 나온 것입니다.

fr 단위는 사용 가능한 공간을 채우지 만 그리드 컨테이너의 최소 크기 나 행 또는 열의 내용보다 작지 않습니다.

기본적으로 최소 너비 또는 최소 높이 선언으로 이미지, img 또는 모눈 항목이있는 경우 소수 단위로 예기치 않은 결과가 발생할 수 있습니다.

젖은 무서워 진 오리처럼 qua 거리고 난 후, 분수 단위로 실험하는데 많은 시간을 보냈습니다. 나는 나의 발견에 관한 기사를 썼다.

3. 그리드의 크기를 어떻게 알지 모릅니다. 아니면 당신은?

CSS 그리드 정의는 항상 다음 라인에서 시작합니다.

디스플레이 : 그리드

종종 행과 열 정의가 뒤 따릅니다. 이 같은:

그리드 템플릿 행 : 10px 1fr 3fr
그리드 템플릿 열 : 1fr

마지막으로 그리드 기술을 자신에게 맞는 기술로 배치 할 수 있습니다.

모눈 항목을 배치하는 방법은 많으므로 간결성을 위해 필요한 코드를 건너 뜁니다.

여기 문제가 있습니다.

후드 아래에서 항목을 배치하기 전에 그리드 행과 열의 크기가 먼저 계산된다고 가정해야합니다. 권리?

글쎄요, 진실은 완전히 반대 인 것 같습니다.

얼마나 이상해?

다음은 사양에서 나온 것입니다.

2.3. 그리드 크기 조정
그리드 항목이 배치되면 그리드 트랙 (행 및 열)의 크기가 계산되어 그리드 정의에 지정된 내용 및 / 또는 사용 가능한 공간의 크기를 고려합니다.

진행 상황에 유의하십시오.

  1. 모눈 항목이 배치됩니다.
  2. 그리드 트랙의 크기가 계산됩니다

이에 대해 궁금한 점이있을 것입니다. 그래서 저는 여러분의 우려를 해결하려고 노력할 것입니다.

먼저 모든 모눈 항목에 모눈 영역이 할당됩니다. 그런 다음이 영역 내에서 격자 항목의 크기가 조정됩니다. 그렇다면 트랙의 크기를 계산하지 않고 그리드 항목이 정확히 어떻게 배치됩니까?

스펙의 그리드 항목 배치 섹션을 살펴보면 실마리를 찾을 수 있습니다.

그리드 크기를 조정할 때 많은 사항이 고려되며 그리드 항목의 크기가 대부분 포함됩니다.

사이징 그리드는 다음을 기반으로 할 수 있습니다.

  • 고정 된 크기 조정 기능 (길이 또는 분해 가능한 백분율).
  • 내장 크기 조정 기능 (최소 내용, 최대 내용, 자동, 내용 만족 ()) 또는
  • 유연한 사이징 기능 (flex).

내가 후드 아래에서 일어나는 것은 그리드 항목이 배치된다는 것입니다.

즉, 아이템을위한 포함 블록이 결정되고,이어서 아이템을위한 사이징 기능이 결정된다. 이것은 차례로 그리드 트랙의 크기에 영향을 미칩니다.

알 겠어?

처음에 생각한 것이 아닙니다.

4. 기본적으로 그리드 항목은 특정 경우를 제외하고 그리드 영역에 맞도록 확장됩니다.

사용자의 개입없이 그리드 항목은 항상 그리드 영역에 맞게 늘어납니다.

따라서 다음과 같이 선언 한 경우 :

그리드 템플릿 영역 : '헤더 헤더 헤더'
                     '사이드 바 메인 메인'
                     '사이드 바 바닥 글 바닥 글'

그리고 특정 그리드 영역에 div가 할당되었습니다.

.div1 {
   그리드 영역 : 헤더
}
.div2 {
   그리드 영역 : 사이드 바
}
.div3 {
   그리드 영역 : 메인
}
.div4 {
   그리드 영역 : 바닥 글
}

div의 너비와 높이를 100 %로 선언 할 필요는 없습니다.

해당 영역을 채우도록 자동으로 늘어납니다.

이제 여기에 캐치가 있습니다.

이 동작은 이미지와 일치하지 않습니다.

Rachel Andrew가 지적했듯이 스펙은 본질적으로 종횡비가있는 그리드 항목에 대해이 동작이 다르다고 말합니다.

큰 말이 당신을 놀라게하지 마십시오. 그것은 데모 고 곤이 아닙니다.

이미지는 기본적으로 인라인 블록 요소이지만 특정 크기도 있습니다. 치수는 자연스럽게 관련되어 있습니다. 이미지의 너비는 400 x 600 픽셀이거나 지정된 크기 일 수 있습니다.

그러나 div와 같은 일반 블록 요소에는 고유 치수가 없습니다. 즉, 그들은 자연적으로 그들에게 속하는 치수를 가지고 있지 않습니다.

따라서 고유 치수가없는 격자 항목은 격자 영역에 맞게 확장되지만 이미지와 같이 고유 치수가있는 격자 항목에는 해당되지 않습니다.

5. 그리드 아이템이 무엇인지 정말로 알고 있습니까?

아래 코드 블록을 고려하십시오.

    
차단     
부동         나는 임의의 텍스트입니다     <스팬>         항목 4     

위의 코드 블록에서 그리드 항목을 찾을 수 있습니까?

코드 블록에 3 개 또는 4 개의 그리드 항목이 몇 개 있습니까?

나는이 질문에 솔직하게 실패했다.

임의 텍스트 인 텍스트는 html 태그로 줄 바꿈되지 않습니다.

무엇 이니?

그래서, 당신의 대답은 무엇입니까?

당신이 3으로 대답하면 틀린 것입니다. 하하!

사양에 따르면, 익명의 그리드 항목은 그리드 내의 각 텍스트 줄에 둘러싸입니다.

그렇습니다. 나는 임의의 텍스트가 그리드 항목이라는 것을 의미합니다.

차단     
부동
    
    나는 임의의 텍스트입니다

    <스팬>
        항목 4
    

네, 정답은 4입니다. 명시적인 그리드 아이템 3 개와 익명 그리드 아이템 1 개가 있습니다!

알았어?

6. 인접한 그리드 항목의 여백이 축소되지 않습니다.

블록 요소와 그리드 컨테이너에는 큰 차이가 있습니다.

내 말은, display : block이있는 요소와 display : grid가있는 요소는 근본적인 차이점이 많다는 것입니다.

여기서 논의하기로 선택한 차이점은 접을 수있는 여백과 관련이 있습니다.

CSS로 배우는 첫 번째 것 중 하나는 접을 수있는 여백이라는 개념입니다. 접을 수있는 여백의 의미를 설명하는 데 많은 시간을 보내고 싶지 않습니다. 당신이 의견에 그것을 제기하면, 나는 할 것이다.

다시 그리드로 돌아갑니다.

모든 모눈 항목에서 여백은 축소되지 않습니다.

글쎄, 이것은 이해할 만하다. 왜 그런지 보여 드리겠습니다.

인접한 그리드 항목은 그리드 영역으로 형성된 포함 블록 내에 독립적으로 포함됩니다.

위의 복잡한 단락이 의미하는 바는 이것입니다. 각 그리드 아이템은 그리드 영역 내에서 살아 숨 쉬고 있습니다

모눈 항목은 해당 모눈 영역 내에 배치됩니다. 그들은 자신의 방해받지 않는 영토에 머물러 있습니다. 접을 수있는 여백의 영향을받지 않습니다. 멋지다.

따라서 기술적으로는 그리드 항목이 다른 그리드 항목과 바로 인접 해 있지 않다고 말할 수 있습니다. 그러나 중단되지 않은 폐쇄 영역 (격자 영역) 내에 포함됩니다.

블록 요소와 그리드 요소 사이에 다른 차이점이 있는지 궁금하다면 주제에 대한 흥미로운 기사를 썼습니다.

7. 자동 채우기 및 자동 맞춤. 차이점이 뭐야?

자동 완성과 자동 맞춤은 같은 기능처럼 보이지만 다른 방식으로 다릅니다.

그리드 컨테이너를 채우는 그리드 트랙을 자동으로 생성 할 수 있다는 점에서 비슷합니다.

예를 들어 다음 코드는 창 너비에 맞는만큼 200px 열을 만듭니다. 남은 공간이 있으면 200px 열에 분산됩니다.

몸 {
  디스플레이 : 그리드;
  그리드 템플릿 열 : 반복 (자동 채우기, 최소 최대 (200px, 1fr));
}

차이점이 뭐야?

자동 채우기는 그리드 항목이 없어도 트랙을 만듭니다. 자동 맞춤은이 작업을 수행하지 않습니다. 빈 트랙을 0으로 수축시킵니다.

그게 다야.

8. 그리드 템플릿 영역 정의에서 문자열의 단어 수는 같아야합니다.

지도처럼 보이는 이상한 그리드-템플릿 영역 값을 기억하십니까?

글쎄, 정말 빨리 일을 망칠 수있는 것 같습니다.

그리드 템플릿 영역 선언에서 모든 문자열의 열 수가 동일해야합니다. 그렇지 않으면 선언이 유효하지 않습니다.

예를 들면 다음과 같습니다.

/ * 이것은 유효하다 * /
그리드 템플릿 영역 : "헤더 헤더 헤더 사이드 바"
                     "메인 메인 메인 사이드 바"
                     "메인 메인 메인 사이드 바"
/ * 이것은 잘못된 것입니다 * /
그리드 템플릿 영역 : "헤더 헤더 헤더 사이드 바"
                     "메인 메인 메인 사이드 바"
                     "주요 메인 사이드 바"

문자열의 단어 수는 같아야합니다.

9. 그리드 항목의 여백 또는 여백에 백분율을 사용하지 마십시오

CSS 그리드 사양에서

이것의 이유는 간단합니다. 이 글을 쓰는 시점에, 당신은 다른 브라우저에서 다른 행동을 할 것입니다.

사양에 따르면, 백분율은 요소의 너비에 대해서만 또는 왼쪽 / 오른쪽 여백을 너비에 대해 분해하는 동안 상단 / 하단을 높이에 대해 해석 할 수 있습니다.

대부분의 브라우저에서 일관된 렌더링을하려면 표 항목의 여백 또는 여백에 백분율을 사용하지 마십시오.

더 중요한 것은 CSS 그리드와 혼동되는 비트가 이미 있다는 것입니다. 격자 선 항목의 백분율 패딩 또는 여백을 사용하여 발에 쏘지 마십시오.

10. 충돌이있을 때 명시 적 그리드의 크기는 어떻게 해결됩니까?

다음과 같이 그리드 선언이 있다고 가정하십시오.

그리드 템플릿 영역 : "헤더 헤더 헤더 사이드 바"
                     "메인 메인 메인 사이드 바"
                     "메인 메인 메인 사이드 바"

위의 코드 블록에는 4 개의 열과 3 개의 행이 있습니다.

이 작업을 수행 한 경우 :

그리드 템플릿 열 : 반복 (5, 1fr)
그리드 템플릿 행 : 반복 (4, 1fr)

이제 더 많은 열과 행이 있습니다. 5 열 및 4 행

알았어?

이제 선언에 충돌이 있습니다. 그렇다면 어떻게 해결됩니까?

사양에 따르면, 명시 적 그리드의 크기는 그리드-템플릿 영역에 의해 정의 된 행 / 열 수와 그리드-템플릿-행 / 그리드-템플릿-컬럼에 의해 크기가 지정된 행 / 열의 수에 의해 결정됩니다. .

사양은 간단한 것으로 복잡해 보일 수 있습니다. 일반 언어에서 의미하는 바는 더 많은 수의 행 또는 열이있는 선언이 이깁니다.

위의 예에서 그리드는 5 개의 열과 4 개의 열이 아닌 4 개의 열과 3 개의 열을 차지합니다.

* 편집 : 그리드 템플릿 영역 속성은 그리드 항목을 그리드에 배치하는 데 사용됩니다. 그렇다면 그리드 정의에서 충돌이 발생하는 이유는 무엇입니까? 그리드는 그리드-템플릿-컬럼 및 그리드-템플릿-행 속성만으로 정의되어 있지 않습니까? 나는 의견 섹션에서 이것에 대답합니다. 확인 해봐.

11. 그리드의 크기는 순전히 트랙 크기의 합이 아닙니다

그리드 트랙은 그리드 선 사이의 거리를 나타냅니다.

이것은 간단하지만 고정 너비 격자가 설정된 경우 언급 할 가치가 있습니다.

그리드의 크기는 grid-row-gap, grid-column-gap 및 justify-content, align-content의 영향을받을 수 있습니다. 슬프게도 트랙 사이에 추가 공간을 추가 할 수 있습니다.

따라서 그리드 내에서 고정 너비를 계산할 때는주의하십시오.

보너스 : 우리 모두 DOCS 개선에 기여할 수 있습니다

나는 친절한 영혼이기 때문에 여기에 팁을 하나 더 추가했습니다

사양은 인간에 의해 작성되었습니다. 그리고 인간은 실수를 할 수 있습니다.

사양을 읽는 동안 나는 작은 오타를 발견했습니다.

당시에는 무엇을해야할지 확실하지 않았습니다. 그래서 트위터에서 물었습니다.

Jen Simmons는 github에 문제를 제기하는 데 도움을 주었으며 문제가 해결되었습니다.

그래서 도덕은 무엇입니까?

가능한 어떤 방식 으로든 기여함으로써 문서를 개선 할 수 있습니다.

그래요 당신!

웹을 함께 개선해 봅시다.

프로가되고 싶습니까?

무료 CSS Grid 안내서를 다운로드하고 두 개의 양질의 대화 형 Flexbox 코스를 무료로 받으십시오!

CSS 그리드를 마스터하는 방법과 그 과정에서 무엇을 빌드해야합니까 (무료 PDF 안내서)

지금 받아보세요