CSS 그리드 이해하기: 그리드 라인

이 시리즈의 첫 번째 기사에서는 그리드 컨테이너를 만드는 방법과 그리드를 구성하는 부모 요소에 적용되는 다양한 속성을 살펴보았습니다. 그리드가 있으면 그리드 라인 세트가 생깁니다. 이 기사에서는 그리드 컨테이너의 직계 자식에 속성을 추가하여 해당 줄에 항목을 배치하는 방법을 배웁니다.

우리는 다음을 다룰 것입니다:

1. 배치 속성 grid-column-start , grid-column-end , grid-row-start , grid-row-end 와 그 속기 grid-column 및 grid-row .
2. grid-area 을 사용하여 줄 번호로 배치하는 방법.
3. 줄 이름에 따라 항목을 배치하는 방법.
4. 항목을 배치할 때 암시적 그리드와 명시적 그리드 간의 차이입니다.
5. 약간의 보너스 subgrid 와 함께 span 키워드를 사용합니다.
6. 자동 배치 항목과 배치 항목을 혼합할 때 주의할 점입니다.

• 1부: 그리드 컨테이너 생성
• 파트 2: 그리드 라인
• 3부: 그리드 템플릿 영역

라인 기반 포지셔닝의 기본 개념

그리드에 항목을 배치하려면 항목이 시작되는 라인을 설정한 다음 종료하려는 라인을 설정합니다. 따라서 5열, 5행 그리드에서 내 항목이 두 번째 및 세 번째 열 트랙과 첫 번째, 두 번째 및 세 번째 행 트랙에 걸쳐 있게 하려면 다음 CSS를 사용합니다. 우리는 트랙 자체가 아니라 라인을 목표로 한다는 것을 기억하십시오.

 .item { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 4; }

이것은 약어로 지정할 수도 있습니다. 슬래시 앞의 값은 시작 라인이고, m 뒤의 값은 끝 라인입니다.

 .item { grid-column: 2 / 4; grid-row: 1 / 4; }

CodePen에서 예제를 보고 항목이 걸쳐 있는 행을 변경할 수 있습니다.

상자 배경이 전체 영역에 걸쳐 늘어나는 이유는 정렬 속성 align-self 및 justify-self 의 초기 값이 늘이기 때문입니다.

항목이 하나의 트랙에만 걸쳐 있어야 하는 경우 기본 동작은 항목이 하나의 트랙에 걸쳐 있기 때문에 끝 줄을 생략할 수 있습니다. 마지막 기사에서와 같이 항목을 자동으로 배치할 때 이를 볼 수 있습니다. 각 항목은 한 열과 한 행 트랙에 걸쳐 있는 셀에 들어갑니다. 따라서 항목이 2행에서 3행으로 확장되도록 하려면 다음과 같이 작성할 수 있습니다.

 .item { grid-column: 2 / 3; }

결승선을 놓치는 것도 완벽할 것입니다.

 .item { grid-column: 2; }

grid-area 속기

grid-area 를 사용하여 항목을 배치할 수도 있습니다. 이 속성은 향후 기사에서 다시 다루겠지만 줄 번호와 함께 사용하면 네 줄 모두를 설정하는 데 사용할 수 있습니다.

 .item { grid-area: 1 / 2 / 4 / 4; }

해당 행 번호의 순서는 grid-row-start , grid-column-start , grid-row-end , grid-column-end 입니다. 수평 언어로 작업하는 경우 왼쪽에서 오른쪽으로(예: 영어) 위쪽, 왼쪽, 아래쪽, 오른쪽입니다. 이것이 CSS에서 여백과 같은 약칭을 일반적으로 지정하는 방식과 반대라는 것을 깨달았을 수도 있습니다.

그 이유는 사용하는 쓰기 모드나 방향에 관계없이 그리드가 동일한 방식으로 작동하기 때문입니다. 이에 대해서는 아래에서 자세히 다루겠습니다. 따라서 값을 화면의 물리적 차원에 매핑하는 것보다 시작과 끝을 모두 설정하는 것이 더 합리적입니다. 저는 이 속성을 선 기반 배치에 사용하지 않는 경향이 있습니다. 스타일시트를 스캔할 때 grid-column 및 grid-row 의 두 가지 값의 약칭이 더 읽기 쉽다고 생각하기 때문입니다.

명시적 그리드의 라인

지난 기사에서 명시적 그리드와 암시적 그리드에 대해 언급했습니다. 명시적 그리드는 grid-template-columns 및 grid-template-rows 속성으로 생성하는 그리드입니다. 열 및 행 트랙을 정의하여 해당 트랙 사이와 그리드의 시작 및 끝 가장자리에서도 선을 정의합니다.

그 줄에는 번호가 매겨져 있습니다. 번호 매기기는 블록 및 인라인 방향 모두에서 시작 가장자리에서 1부터 시작합니다. 가로 쓰기 모드인 경우 문장이 왼쪽에서 시작하여 오른쪽으로 이어지는 경우 블록 방향의 라인 1이 그리드 상단에 있고 인라인 방향의 라인 1이 왼쪽에 있음을 의미합니다. 선.

아랍어로 작업하는 것처럼 수평 RTL 언어로 작업하는 경우 블록 방향의 라인 1은 여전히 ​​상단에 있지만 인라인 방향의 라인 1은 오른쪽에 있습니다.

수직 쓰기 모드에서 작업 중이고 아래 이미지에서 writing-mode: vertical-rl 을 설정했다면 라인 1은 해당 쓰기 모드에서 블록 방향의 시작 부분에 있습니다. 이 경우에는 오른쪽에 있습니다. 인라인 방향의 1행이 맨 위에 있습니다.

따라서 격자선은 문서 또는 구성 요소의 쓰기 모드 및 스크립트 방향에 연결됩니다.

명시적 그리드의 끝 라인은 숫자 -1 이고 라인은 해당 지점에서 다시 계산되어 라인 -2 를 마지막 라인에서 두 번째로 만듭니다. 이는 명시적 그리드의 모든 트랙에 걸쳐 항목을 확장하려는 경우 다음을 사용하여 수행할 수 있음을 의미합니다.

 .item { grid-column: 1 / -1; }

암시적 그리드의 선

암시적 그리드 트랙을 만든 경우 1부터 계산됩니다. 아래 예에서 열에 대한 명시적 그리드를 생성했지만 행 트랙은 암시적 그리드에서 생성되었으며 여기에서 grid-auto-rows 를 사용하고 있습니다. 5em으로 크기를 조정합니다.

클래스가 placed 된 항목이 행 1에서 행 -1까지 확장되도록 배치되었습니다. 두 행에 대한 명시적 그리드로 작업하는 경우 항목은 두 행에 걸쳐 있어야 합니다. 행 트랙이 암시적 그리드에서 생성되었기 때문에 라인 -1 은 라인 3이 아닌 라인 2로 확인되었습니다.

현재로서는 얼마나 많은 라인이 있는지 알지 못하면 암시적 그리드의 마지막 라인을 대상으로 지정할 수 있는 방법이 없습니다.

명명된 줄에 항목 배치

지난 기사에서 라인 번호 외에도 그리드의 라인에 선택적으로 이름을 지정할 수 있다고 설명했습니다. 트랙 크기 사이의 대괄호 안에 이름을 추가하여 라인의 이름을 지정합니다.

 .grid { display: grid; grid-template-columns: [full-start] 1fr [main-start] 2fr 2fr [main-end full-end]; }

이름이 지정된 라인이 있으면 아이템을 배치할 때 라인 번호를 이름으로 바꿀 수 있습니다.

 .item { grid-column: main-start / main-end; } 

라인에 여러 이름이 있는 경우 항목을 배치할 때 원하는 이름을 선택할 수 있습니다. 모든 이름은 동일한 라인으로 해석됩니다.

참고 : 줄에 이름을 지정할 때 발생하는 몇 가지 흥미로운 일이 있습니다. 자세한 내용은 내 기사 "CSS 그리드 레이아웃의 이름 지정"을 참조하십시오.

같은 이름의 줄이 여러 개 있으면 어떻게 됩니까?

이름이 같은 행이 여러 개 있으면 흥미로운 동작이 나타납니다. repeat() 표기법 내에서 줄 이름을 지정하면 발생할 수 있는 상황입니다. 아래 예에는 1fr 2fr 패턴을 4번 반복하여 만든 8열 그리드가 있습니다. 작은 트랙 sm 및 큰 트랙 lg 앞에 줄 이름을 지정했습니다. 이것은 각 이름에 4줄이 있음을 의미합니다.

이 상황에서 이름을 인덱스로 사용할 수 있습니다. 따라서 sm 이라는 두 번째 줄에서 시작하여 lg 라는 세 번째 줄까지 확장되는 항목을 배치하려면 grid-column: sm 2 / lg 3 을 사용합니다. 번호 없이 이름을 사용하는 경우 항상 해당 이름이 있는 첫 번째 줄로 확인됩니다.

span 키워드 사용하기

항목이 특정 수의 트랙에 걸쳐 있기를 원하지만 그리드에서 정확히 어디에 놓일지 모르는 상황이 있습니다. 예는 자동 배치를 사용하여 항목을 배치하지만 기본값 1이 아닌 여러 트랙에 걸쳐 있기를 원하는 경우입니다. 이 경우 span 키워드를 사용할 수 있습니다. 아래 예에서 내 항목은 auto 라인에서 시작합니다. 이것은 자동 배치가 배치할 라인이며 3개의 트랙에 걸쳐 있습니다.

 .item { grid-column: auto / span 3; } 

이 기술은 grid-template-columns 및 grid-template-rows 에 대한 subgrid 그리드 값을 광범위하게 지원하면 매우 유용할 것입니다. 예를 들어, 카드에 서로 정렬하려는 헤더와 기본 콘텐츠 영역이 있는 카드 레이아웃에서 일반적인 자동 배치 동작을 계속 허용하면서 각 카드가 2행에 걸쳐 있도록 할 수 있습니다. 개별 카드는 행에 대해 subgrid 를 사용합니다(즉, 각각 두 행 가져오기). Firefox를 사용하는 경우 아래 예제에서 이를 볼 수 있으며 내 기사 CSS Grid Level 2: Here Comes Subgrid를 읽고 하위 그리드에 대해 자세히 알아보세요.

/

라인 기반 배치로 항목 레이어링

그리드는 그리드의 빈 셀에 항목을 자동으로 배치하며 항목을 동일한 셀에 쌓지 않습니다. 그러나 선 기반 배치를 사용하여 항목을 동일한 그리드 셀에 넣을 수 있습니다. 이 다음 예에서는 두 행 트랙에 걸쳐 있는 이미지와 두 번째 트랙에 배치되고 반투명 배경이 제공되는 캡션이 있습니다.

항목은 문서 소스에 나타나는 순서대로 누적됩니다. 따라서 위의 예에서 캡션은 이미지 뒤에 오므로 이미지 위에 표시됩니다. 캡션이 먼저 오면 이미지 뒤에 표시되고 우리는 그것을 볼 수 없습니다. z-index 속성을 사용하여 이 스택을 제어할 수 있습니다. 캡션이 소스의 첫 번째 위치에 있어야 하는 경우 이미지보다 캡션 값이 더 높은 z-index 를 사용할 수 있습니다. 이렇게 하면 읽을 수 있도록 캡션이 이미지 상단에 표시됩니다.

라인 기반 및 자동 배치 혼합

배치된 항목과 자동 배치된 항목을 혼합하는 경우 약간의 주의가 필요합니다. 항목이 그리드에 완전히 자동 배치되면 그리드에 순차적으로 배치되며 각각은 다음으로 사용할 수 있는 빈 공간을 찾습니다.

기본 동작은 항상 앞으로 진행하고 항목이 그리드에 맞지 않으면 간격을 두는 것입니다. dense 값과 함께 grid-auto-flow 속성을 사용하여 이 동작을 제어할 수 있습니다. 이 경우 그리드에 이미 남겨진 갭에 맞는 아이템이 있다면 그 갭을 채우기 위해 소스 순서를 벗어나 배치됩니다. 조밀 패킹을 사용하는 아래 예에서는 이제 항목 3이 항목 2보다 먼저 배치됩니다.

이 동작은 시각적 레이아웃이 따르고 있는 소스 순서와 동기화되지 않기 때문에 문서를 탭핑하는 사용자에게 문제를 일으킬 수 있습니다.

일부 항목을 이미 배치한 경우 자동 배치가 약간 다르게 작동합니다. 배치된 항목이 먼저 배치되고 자동 배치는 항목 배치를 시작하기 위해 사용 가능한 첫 번째 간격을 찾습니다. 빈 그리드 행을 통해 레이아웃 상단에 약간의 공백을 남겨둔 경우 자동 배치되는 일부 항목을 도입하면 해당 트랙에 포함됩니다.

이 마지막 예제에서 보여주기 위해 첫 번째 행을 비워둔 상태로 항목 1과 2를 선 기반 위치 지정 속성으로 배치했습니다. 이후 항목은 공백을 채우기 위해 위로 이동했습니다.

그리드에 배치되지 않은 새로운 요소를 레이아웃에 도입하면 항목이 이상한 위치에 배치될 수 있으므로 이 동작은 이해할 가치가 있습니다.

마무리

이것이 그리드 선에 대해 알아야 할 거의 전부입니다. 그리드를 어떻게 사용하든 항상 번호가 매겨진 라인이 있다는 것을 기억하십시오. 항상 한 라인 번호에서 다른 라인 번호로 항목을 배치할 수 있습니다. 향후 기사에서 살펴볼 다른 방법은 레이아웃을 지정하는 대체 방법이지만 번호가 매겨진 선으로 생성된 그리드를 기반으로 합니다.

• 1부: 그리드 컨테이너 생성
• 파트 2: 그리드 라인
• 3부: 그리드 템플릿 영역