CSS 그리드 초보자 가이드

Unsplash에 Greg Rakozy의 사진

2016 년 말에 CSS Grid에 대해 처음 들었습니다. 첫 Tech Tech® 회의 중 하나에 참석 한 한 참석자는 그것이 얼마나 놀라운지를 들었습니다. 1 년 반 후 빨리 감 으면 마침내 Grid에 대해 더 깊이 파고 들고 있습니다. 헌신적 인 Flexbox 사용자는 이미 이것이 게임 체인저가 될 방법을 말할 수 있습니다.

CSS Grid를 배우기 시작할 때 가장 큰 질문은 Grid가 Flexbox와 어떻게 다른가요? 그리고 일반적으로 Grid는 Flexbox가 할 수있는 모든 것을 할 수 있다는 것을 알았습니다. 일부 사람들은 Grid가 다차원 레이아웃을위한 것이고 Flexbox는 1 차원 레이아웃을 사용해야한다는 생각을합니다. 그러나 Grid는 1 차원 레이아웃에서도 훌륭합니다. 특히 나중에 다시 와서 해당 레이아웃을 다차원으로 만들려는 경우에는 더욱 그렇습니다.

CSS 그리드 설정

그리드는 설정하기가 매우 쉽습니다. 필요한 것은 두 줄의 CSS입니다.

HTML

  
1   
2   
3   
4   
5   
6

CSS

.wrapper {
    디스플레이 : 그리드;
    그리드-템플릿-컬럼 : 10rem 10rem 10rem;
}

그리고 짜잔! 그리드가 있습니다. 진심으로, 그게 당신이 필요한 전부입니다. 꽤 좋아요

Flexbox를 display : flex로 설정하는 경우와 달리 display : grid를 래퍼에 추가해도 즉시 차이가 생기지 않습니다. 그리드에 원하는 열 수를 명시 적으로 정의하지 않았기 때문입니다. 위에서와 같이 그리드 템플릿 열로이 작업을 수행합니다. 이 예에서는 3 개의 열을 각각 10rem의 너비로 설정합니다.

기본 CSS 그리드

그리드-템플릿 열을 설정할 때 원하는 값을 사용할 수 있지만 최대 100 %를 추가하지 않는 한 백분율을 유지하는 것이 좋습니다. 이것은 약간의 그리드 갭 (우리가 조금만 살펴볼 것)을 고려해야하기 때문에 약간 까다로울 수 있기 때문입니다.

명시 적 트랙과 암시 적 트랙

명시 적 및 암시 적 트랙에 대해 이야기하기 전에 먼저 트랙이 무엇인지에 대해 이야기하겠습니다. 트랙은 열과 행의 번호가 매겨지는 방식입니다. CSS 열에서는 개별 열과 행을 스스로 계산하는 대신 트랙 선으로 계산합니다. 여기에 우리가 시작한 그리드가 있습니다. 여러분이보기 쉽도록 모든 트랙 행과 열의 번호를 매겼습니다.

열 줄과 행 줄이있는 CSS 그리드

실제로 4 개의 열 줄과 3 개의 행 줄이 있음을 알 수 있습니다. 아이템을 그리드에 배치 할 때 도움이됩니다.

간단한 참고 사항 : Firefox의 Developer Edition (일반 Firefox의 베타 버전)을 사용하는 경우 실제로 열 및 행 트랙 번호를 볼 수있는 훌륭한 개발 도구가 있습니다. 래퍼 요소를 검사 한 다음 레이아웃 탭으로 이동하면 래퍼의 확인란을 선택하면 그리드가 아래와 같이 나타납니다! 앞으로 Chrome에 이와 같은 검사 기능이 추가되기를 바랍니다. 매우 도움이됩니다.

Firefox Developer Edition 검사기 도구

명시 적 트랙과 암시 적 트랙의 차이점으로 돌아가 보겠습니다. 위에서 코드를 가져 오면 열만 설정했음을 알 수 있습니다. 이 경우 열을 3 개로 명시 적으로 설정했지만 암시 적으로 행을 설정했습니다. 우리는 6 개의 아이템을 가지고 있지만 분명히이 모든 아이템들은 3 개의 열에 맞지 않을 수 있으므로 두 번째 행은 암시 적으로 설정됩니다.

이것은 약간 혼란 스럽기 때문에 명시 적 트랙과 암시 적 트랙의 차이점을 확인하려면 CSS 그리드를 사용하는 것이 좋습니다.

그리드 갭 추가

그리드 간격은 항목 외부에만 추가되고 그리드 외부에는 추가되지 않는다는 점을 제외하고 여백과 비슷합니다. Flexbox 그리드의 항목에 여백을 추가하여 그리드의 래퍼로 이동하여 그리드 외부로 설정되는 여백을 상쇄하기 위해 동일한 양의 마진을 설정해야하는 경우가 많습니다. 고맙게도 CSS Grid를 사용하면 처리 할 필요가 없습니다.

위의 CSS 예제를 예로 들어 그리드 갭을 추가해 봅시다.

.wrapper {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 10rem 10rem 10rem;
  그리드 갭 : 1rem;
}
그리드 간격이 1rem 인 CSS 그리드

속기 속성 grid-gap을 사용했지만 grid-column-gap 및 grid-row-gap을 사용하여 열과 행에 대한 명시 적 값을 정의 할 수 있습니다.

* 참고 : Chrome 66은 그리드 간격을 간격으로 변경하고 그리드-열 간격 / 격자 행 간격을 열 간격 / 행 간격으로 변경합니다.

반복 () 함수

너비가 모두 같은 3 개의 열이있는 그리드-템플릿 열을 사용할 때 각 열의 너비를 정의하는 것은 매우 간단합니다. 그러나 그보다 더 많은 열을 원한다면 많은 타이핑이 필요합니다. 이것은 repeat () 함수가 들어오는 곳입니다.

다음은 repeat () 함수가 추가 된 상태에서 사용한 예입니다.

.wrapper {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (3, 10rem);
  그리드 갭 : 1rem;
}

CSS에서 볼 수 있듯이 각각 3 개의 열을 10rem 너비로 설정하고 있습니다. 이 격자는 격자 간격 예제에 표시된 격자와 정확히 같습니다. repeat () 함수를 사용하면 많은 열을 설정하고 싶을 때 글을 좀 더 간단하고 읽기 쉽게 만듭니다.

분수 단위

분수 단위 또는 fr은 CSS 그리드에 도입 된 새로운 CSS 길이 단위이며 항상 사용하는 것을 볼 수 있습니다. 너비가 같은 열 3 개를 원한다고 가정 해 봅시다. 항목에 width : calc (100 % / 3)를 설정하는 대신 분수 단위를 사용할 수 있습니다. 소수 단위를“빈 공간”으로 생각하십시오.

우리가 사용한 예를 계속해 봅시다.

.wrapper {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 1fr 1fr 1fr;
  그리드 갭 : 1rem;
}

내가 바꾼 유일한 것은 그리드-템플릿-컬럼입니다. 이제 브라우저에 3 개의 열을 원한다고 말하고 각 열이 하나의 소수 단위 또는 하나의 "여유 공간"을 차지하도록하고 있습니다. 이는 Flexbox의 flex-grow 속성과 매우 유사합니다.

분수 단위를 사용하는 CSS 그리드

각 항목이 이전 예보다 약간 넓은 이유는 이제 3 개의 열에 맞추면서 가능한 한 많은 공간을 차지하기 때문입니다. 이 경우 하드 너비를 설정하지 않아 화면의 전체 너비를 차지합니다. 나는 이것이 당신 자신의 화면에서 그것을 보지 않고는 조금 어렵다는 것을 알고 있습니다. 그래서 나는 이것을 스스로 엉망으로 만드는 것이 좋습니다.

모든 열을 1fr로 설정할 필요는 없습니다. 아래는 첫 번째와 세 번째 열을 10rems로 설정하고 가운데 열이 1fr 인 예입니다. 열을 2fr, 3fr 등으로 설정할 수도 있으며 해당 열의 항목은 공간의 2 배, 3 배 등을 차지합니다.

중간 열만 1fr로 설정된 CSS 그리드

개별 그리드 항목 크기 조정

개별 그리드 항목의 크기 조정에 대해 이야기하겠습니다. 그리드 템플릿 열을 사용하여 너비를 명시 적으로 설정하기 때문에 개별 항목에 하드 너비를 배치 할 수 없습니다. 그러나이 예에서 5 번 항목이 여러 열의 너비가되도록하려면 어떻게해야합니까? 그리드 열과 스팬을 사용하여이 작업을 수행 할 수 있습니다.

.wrapper {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (3, 10rem);
  그리드 갭 : 1rem;
}
.item5 {
  그리드-열 : 스팬 2;
}

위에서 항목 5의 그리드 열을 2의 범위로 설정하여 항목 5의 너비를 2 열로 설정하는 것을 볼 수 있습니다.

개별 항목에 범위가있는 CSS 그리드

그러나 항목 5가 3 개의 열에 걸쳐 있도록하려면 어떻게해야합니까? 이것이 일어날 것입니다.

세 열에 걸쳐 항목 5에 걸친 CSS 그리드

다섯 번째 항목은 자연스럽게 두 번째 열에서 시작하기 때문에 설정 한 총 너비에 걸쳐 충분한 공간이 없습니다. 따라서 다음 행으로 이동합니다. 항목을 여러 행으로 확장하려는 경우 그리드 열에서 그리드 행에 동일한 개념을 적용 할 수 있습니다.

다섯 번째 항목에서 남은 빈 공간을 한 줄 아래로 고정하기위한 매우 간단한 솔루션이 있습니다. 행 또는 열에 걸쳐 항목을 설정하든 그리드 자동 흐름 : 밀도에 관계없이 사용할 수 있습니다.

.wrapper {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (3, 10rem);
  그리드 갭 : 1rem;
  그리드 자동 흐름 : 밀도가 높음;
}
.item5 {
  그리드-열 : 스팬 3;
}

CSS 그리드에서 그리드는 항목이 맞는지 자동으로 확인합니다. 위에서 말했듯이 항목이 맞지 않으면 다음 줄로 넘어갑니다. 그리드-자동 흐름 : 밀도는 그리드가 빈 공간에 맞는 항목을 채우도록 지시합니다. 이 경우 그리드가 자동으로 해당 항목과 여섯 번째 항목을 빈 지점으로 이동하도록 일곱 번째 그리드 항목을 추가했습니다.

CSS Grid는 항상 특정 지점으로 이동해야하는 항목 (이 경우 항목 5)은 3 개의 열에 걸쳐 있기 때문에 항상 레이아웃합니다. 그런 다음 grid-auto-flow : dense set을 설정하면 그리드의 빈 지점에 맞는 다른 항목을 찾습니다.

그리드 자동 흐름 기능이있는 CSS 그리드 : 밀도

grid-auto-flow 속성 자체는 항목을 이미 정의한 후 다른 행이나 열을 추가해야하는 방향을 결정합니다. 행이 기본값입니다. grid-auto-flow : dense를 사용하는 것 외에는 큰 유스 케이스를 보지 못했습니다.

그리드 아이템 배치

개별 그리드 항목의 크기를 조정하는 예에서는 원래 항목 5를 그리드 열 : span 2로 설정하여 항목 5가 두 열에 걸쳐있을 수있었습니다. 실제로 그리드 열은 그리드 열 시작 및 그리드 열 끝의 줄임말입니다. 그리드 행에서도 마찬가지입니다.

따라서 기술적으로 항목 5를 그리드 열 시작 : 범위 2 및 그리드 열 끝 : 자동으로 설정했습니다. 기본적으로 그리드는 항목 5를 자연스럽게 시작하지만 크기는 두 배로 시작하도록 지시했습니다.

5 번 항목으로 다시 작업 해 보겠습니다. Firefox Developer Edition의 관리자 도구를 사용하여이 항목을 보여 드리도록하겠습니다. 따라서 5 번 트랙 항목이 무엇인지 더 쉽게 확인할 수 있습니다. 그리드 항목을 몇 개 더 추가했습니다.

.wrapper {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (3, 10rem);
  그리드 갭 : 1rem;
}
.item5 {
  그리드 열 시작 : 1;
  그리드-열-엔드 : 3;
}

CSS Grid는 다섯 번째 항목보다 먼저 모든 항목을 레이아웃하고, 중지 한 다음 항목 5를 시작하고 끝낸 위치를 확인한 후 지시 한 위치에 배치합니다. 여기서 축약 형은 그리드 열입니다. 1 / 3 여기서 1은 시작 값이고 3은 종료 값입니다.

grid-column-start 및 grid-column-end를 사용하는 CSS 그리드

또한 개별 그리드 항목에 범위의 폭과 종료 위치를 지정할 수 있습니다. 이 예에서는 속기 그리드 열 속성을 사용하고 있으므로 항목 5는 트랙 라인 4에서 끝나는 두 열에 걸쳐 있습니다.

.wrapper {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (3, 10rem);
  그리드 갭 : 1rem;
}
.item5 {
  그리드-열 : span 2/4;
}
그리드 열 속기 속성이있는 CSS 그리드

항목이 그리드의 전체 너비에 걸쳐 있지만 그리드의 너비를 모르는 경우 그리드 열을 1 / -1로 설정할 수 있습니다. 기본적으로 -1 값은 아이템이 마지막 트랙으로 넘어가도록 지시합니다. 행으로이 작업을 수행하면 항목이 그리드 아래쪽으로 완전히 이동하지 않을 수 있습니다. 암시 적 행이 아닌 명시 적 행의 맨 아래로만 이동합니다.

자원

다음은 CSS Grid에 대한 심층적 인 다이빙을 권장합니다!

  • Wes Bos의 CSS 그리드 튜토리얼 — 무료이며 그리드에 대해 배웠습니다. 나는 그의 스타일의 가르침을 좋아합니다!
  • CSS 트릭의 CSS 그리드에 대한 완전한 안내서-그리드의 특정 측면에 갇힐 때 유용한 치트 시트가 있습니다.
  • CSS Grid Garden — CSS 그리드에 대해 배운 것을 연습 할 수있는 재미있는 방법입니다. 때로는 약간 혼란 스러우므로 이것을 시도하기 전에 자습서를 수행하는 것이 좋습니다.

CSS Grid에 대한 튜토리얼을 읽어 주셔서 감사합니다! 내가 두려워하는``자신에 대해 말해줘 ''인터뷰 질문,‘왜 부트 캠프 대학원을 고용해야 하는가? 또는 내가 어떻게 개발자가되었는지에 대한 이야기 ​​''같은 다른 기사를 확인하십시오.

그리고 트위터에서 기술에 대한 많은 트윗과 솔직히 말하면 개에 대한 많은 트윗에 대해 나를 따르십시오.