CSS 그리드로 작업할 때 가장 먼저 할 일은 다음을 설정하는 것입니다. display: grid 그리드 컨테이너가 되고자 하는 요소에 그런 다음 다음 조합을 사용하여 그리드를 명시적으로 정의합니다. grid-template-columns, grid-template-rows및 grid-template-areas. 그리고 거기에서 다음 단계는 그리드 안에 항목을 배치하는 것입니다.
이것은 사용되어야 하는 고전적인 접근 방식이며 저도 권장합니다. 그러나 그리드를 만드는 또 다른 방법이 있습니다. 명확한 정의 없이. 우리는 이것을 암시적 그리드.
차례
“명시적, 암묵적? 대체 여기서 무슨 일이 일어나고 있는 겁니까?”
이상한 용어, 맞죠? 마누엘 마투조비치 이미 이 좋은 설명 CSS Grid에서 "암시적" 및 "명시적"으로 할 수 있는 일에 대해 자세히 살펴보겠습니다. 전에, s정화 말한다 :
XNUMXD덴탈의
grid-template-rows,grid-template-columns및grid-template-areas속성은 다음을 형성하는 고정된 수의 트랙을 정의합니다. 명시적 그리드. 그리드 항목이 이러한 경계 밖에 있는 경우 그리드 컨테이너는 그리드에 암시적 그리드 선을 추가하여 암시적 그리드 트랙을 생성합니다. 명시적 격자 형태와 함께 이러한 선 암시적 그리드.
따라서 일반 영어에서 브라우저는 요소가 정의된 그리드 외부에 배치되는 경우에 대비하여 추가 행과 열을 자동으로 생성합니다.
자동 배치는 어떻습니까?
암시적 그리드의 개념과 유사하게, 자동 배치 그리드 내부에 항목을 자동으로 배치하는 브라우저의 기능입니다. 우리는 항상 각 항목의 위치를 줄 필요가 없습니다.
다양한 사용 사례를 통해 이러한 기능이 몇 줄의 코드로 복잡하고 동적인 그리드를 만드는 데 어떻게 도움이 되는지 확인할 것입니다.
동적 사이드바
여기에 세 가지 다른 레이아웃이 있지만 모두에 대해 작동하는 하나의 그리드 구성만 있습니다.
main {
display: grid;
grid-template-columns: 1fr;
}하나의 열만 모든 여유 공간을 차지합니다. 이것이 우리의 "명시적" 그리드입니다. 하나의 그리드 항목에 맞게 설정됩니다. main 그리드 컨테이너. 그게 다야. 하나의 열과 하나의 행:
그러나 거기에 다른 요소를 놓기로 결정했다면 어떻게 될까요? aside (우리의 동적 사이드바). 현재(그리고 명시적으로) 정의되어 있으므로 그리드는 해당 요소의 위치를 찾기 위해 자동으로 조정되어야 합니다. CSS로 다른 작업을 수행하지 않는 경우 DevTools가 알려주는 내용은 다음과 같습니다.
20px 시각적으로 사물을 구분하는 데 도움이 되는 간격.우리는 이동할 수 있습니다 <aside> 옆의 칼럼으로 <section>:
aside {
grid-column-start: 2;
}이제 DevTools가 알려준 내용은 다음과 같습니다.
두 번째 열에 요소를 배치하지만... 두 번째 열이 없습니다. 이상하지? 우리는 두 번째 열을 선언한 적이 없습니다. <main> 그리드 컨테이너이지만 브라우저가 우리를 위해 만들었습니다! 이것은 우리가 살펴본 사양의 핵심 부분입니다.
그리드 항목이 이러한 경계 외부에 배치되면 그리드 컨테이너는 그리드에 암시적 그리드 선을 추가하여 암시적 그리드 트랙을 생성합니다.
이 강력한 기능을 통해 동적 레이아웃을 가질 수 있습니다. 우리에게만 있다면 <section> 요소, 우리가 얻는 모든 것은 하나의 열입니다. 하지만 추가하자면 <aside> 요소를 믹스에 추가하면 이를 포함할 추가 열이 생성됩니다.
우리는 배치할 수 있었다 <aside> 이전 <section> 대신 다음과 같이:
aside {
grid-column-end: -2;
} 이것은 암시적 열을 끝에 배치하는 이전 코드와 달리 그리드의 시작 부분에 암시적 열을 생성합니다.
다음을 사용하여 같은 작업을 더 쉽게 수행할 수 있습니다. grid-auto-flow 모든 암시적 트랙을 플로우로 설정하는 속성 column 방향:
이제 지정할 필요가 없습니다. grid-column-start 배치하기 위해 <aside> 오른쪽에 있는 요소 <section>! 사실, 우리가 언제든지 거기에 넣기로 결정한 다른 그리드 항목은 이제 열 방향으로 흐를 것이며, 각 항목은 자체 암시적 그리드 트랙에 배치됩니다. 그리드의 항목 수를 미리 알 수 없는 상황에 적합합니다!
즉, 우리는 여전히 필요합니다 grid-column-end 왼쪽 열에 배치하려는 경우 <aside> 차례로 푸시하는 명시적 열을 차지합니다. <section> 명시적 그리드 외부에서 암시적 열을 사용하도록 강제합니다.
내가 알지. 조금 복잡합니다. 다음은 이 작은 단점을 더 잘 이해하는 데 사용할 수 있는 또 다른 예입니다.
첫 번째 예에서는 배치를 지정하지 않았습니다. 이 경우 브라우저는 먼저 <aside> DOM에서 처음에 오기 때문에 명시적 열의 요소입니다. 그만큼 <section>한편, 브라우저가 자동으로(또는 암시적으로) 생성하는 그리드 열에 자동으로 배치됩니다.
두 번째 예에서는 다음을 설정합니다. <aside> 명시적 그리드 외부의 요소:
aside {
grid-column-end: -2;
}이제 그건 중요하지 않아 <aside> HTML에서 첫 번째로 나옵니다. 재할당하여 <aside> 다른 곳에서 우리는 <section> 명시적 열을 사용하는 데 사용할 수 있는 요소입니다.
이미지 그리드
큰 이미지와 그 옆(또는 그 아래)에 몇 개의 썸네일이 있는 이미지 격자로 다른 것을 시도해 보겠습니다.
두 가지 그리드 구성이 있습니다. 하지만 그거 알아? 나는 그리드를 전혀 정의하지 않습니다! 내가 하는 일은 이것뿐입니다.
.grid img:first-child {
grid-area: span 3 / span 3;
}우리가 이와 같은 것을 풀기 위해 한 줄의 코드만 필요하다는 것은 놀라운 일입니다. 그래서 무슨 일이 일어나고 있는지 분석해 봅시다. 그러면 그것이 생각보다 쉽다는 것을 알게 될 것입니다. 가장 먼저, grid-area 다음 속성을 단일 선언으로 결합하는 약식 속성입니다.
grid-row-startgrid-row-endgrid-column-startgrid-column-end
기다리다! 아니
grid-area정의하는 데 사용하는 속성 명명된 영역 요소가 그리드에서 시작하고 끝나는 위치 대신?
예, 하지만 더 많은 일을 합니다. 에 대해 훨씬 더 많이 쓸 수 있습니다. grid-area하지만 이 특별한 경우:
.grid img:first-child {
grid-area: span 3 / span 3;
}
/* ...is equivalent to: */
.grid img:first-child {
grid-row-start: span 3;
grid-column-start: span 3;
grid-row-end: auto;
grid-column-end: auto;
}약식 버전을 확장하기 위해 DevTools를 열 때 동일한 것을 볼 수 있습니다.
즉, 그리드의 첫 번째 이미지 요소는 세 개의 열 와 세 줄. 그러나 열이나 행을 정의하지 않았기 때문에 브라우저가 대신 처리합니다.
기본적으로 3⨉3 격자를 차지하기 위해 HTML에 첫 번째 이미지를 배치했습니다. 즉, 다른 이미지는 새로 지정할 필요 없이 동일한 세 개의 열에 자동으로 배치됩니다.
요약하자면, 우리는 브라우저에 첫 번째 이미지가 그리드 컨테이너를 설정할 때 명시적으로 정의하지 않은 세 개의 열과 세 개의 행의 공간을 차지해야 한다고 말했습니다. 브라우저는 우리를 위해 해당 열과 행을 설정합니다. 결과적으로, HTML의 나머지 이미지는 동일한 세 개의 열과 행을 사용하여 제자리에 바로 흐릅니다.. 그리고 첫 번째 이미지가 첫 번째 행의 세 열을 모두 차지하기 때문에 나머지 이미지는 각각 세 개의 열을 포함하는 추가 행으로 흐릅니다. 여기서 각 이미지는 단일 열을 차지합니다.
이 모든 것이 CSS 한 줄에서! 이것이 "암시적" 그리드와 자동 배치의 힘입니다.
해당 데모의 두 번째 그리드 구성에서 내가 한 일은 다음을 사용하여 자동 흐름 방향을 변경하는 것입니다. grid-auto-flow: column 이전에 배치할 때와 동일한 방식으로 <aside> 옆에 있는 요소 <section>. 이것은 브라우저가 네번째 열은 나머지 이미지를 배치하는 데 사용할 수 있습니다. 그리고 세 개의 행이 있으므로 나머지 이미지는 동일한 세로 열 안에 배치됩니다.
오버플로 없이 그리드 내부에 잘 맞도록 이미지에 몇 가지 속성을 추가해야 합니다.
.grid {
display: grid;
grid-gap: 10px;
}
/* for the second grid configuration */
.horizontal {
grid-auto-flow: column;
}
/* The large 3⨉3 image */
.grid img:first-child {
grid-area: span 3 / span 3;
}
/* Help prevent stretched or distorted images */
img {
width: 100%;
height: 100%;
object-fit: cover;
}물론 하나의 값을 조정하여 더 많은 이미지를 고려하도록 그리드를 쉽게 업데이트할 수 있습니다. 그게 될거야 3 큰 이미지의 스타일에서. 우리는 이것을 가지고 있습니다:
.grid img:first-child {
grid-area: span 3 / span 3;
}그러나 단순히 다음으로 변경하여 네 번째 열을 추가할 수 있습니다. 4 대신 :
.grid img:first-child {
grid-area: span 4 / span 4;
}더 나은 방법: 업데이트를 훨씬 쉽게 하기 위해 사용자 정의 속성으로 설정해 보겠습니다.
동적 레이아웃
사이드바를 사용한 첫 번째 사용 사례는 첫 번째 동적 레이아웃이었습니다. 이제 요소의 수가 그리드 구성을 결정하는 더 복잡한 레이아웃을 다룰 것입니다.
이 예에서 그리드가 어색한 간격이나 누락된 공간을 남기지 않고 요소 수에 잘 맞는 방식으로 조정되는 XNUMX개에서 XNUMX개의 요소를 가질 수 있습니다.
우리가 하나의 요소를 가지고 있을 때, 우리는 아무것도 하지 않습니다. 요소는 그리드에 의해 자동으로 생성된 유일한 행과 열을 채우도록 늘어납니다.
비트 두 번째 요소를 추가할 때 다음을 사용하여 다른 (암시적) 열을 만듭니다. grid-column-start: 2.
세 번째 요소를 추가할 때 두 열의 너비를 차지해야 합니다. grid-column-start: span 2하지만 다음과 같은 경우에만 :last-child 왜냐하면 (그리고 언제) 네 번째 요소를 추가하면 해당 요소는 단일 열만 차지해야 하기 때문입니다.
그것을 더하면, 우리는 네 가지 그리드 구성 와 함께 두 가지 선언 암시적 그리드의 마법:
.grid {
display: grid;
}
.grid :nth-child(2) {
grid-column-start: 2;
}
.grid :nth-child(3):last-child {
grid-column-start: span 2;
}다른 방법을 시도해 보겠습니다.
하나 또는 두 개의 요소만 있는 첫 번째 및 두 번째 경우에는 아무 것도 하지 않습니다. 그러나 세 번째 요소를 추가하면 브라우저에 다음과 같이 알립니다. :last-child — 두 개의 열에 걸쳐 있어야 합니다. 네 번째 요소를 추가할 때 브라우저에 해당 요소를 두 번째 열에 배치해야 한다고 알립니다.
.grid {
display: grid;
}
.grid :nth-child(3):last-child {
grid-column-start: span 2;
}
.grid :nth-child(4) {
grid-column-start: 2;
}트릭을 시작하고 있습니까? 요소 수에 따라 브라우저에 특정 지침을 제공합니다(사용 :nth-child) 그리고 때로는 하나의 명령으로 레이아웃을 완전히 변경할 수 있습니다.
크기 조정은 다른 콘텐츠로 작업할 때 동일하지 않습니다.
항목의 크기를 정의하지 않았기 때문에 브라우저는 콘텐츠에 따라 자동으로 크기를 조정하고 방금 본 것과 다른 크기로 끝날 수 있습니다. 이를 극복하기 위해 우리는 명시 적으로 모든 열과 행의 크기를 동일하게 지정합니다.
grid-auto-rows: 1fr;
grid-auto-columns: 1fr;헤이, 우리는 아직 그 속성을 가지고 놀지 않았습니다! grid-auto-rows 와 grid-auto-columns 그리드 컨테이너에서 암시적 행과 열의 크기를 각각 설정합니다. 또는 다음과 같이 사양 설명 :
XNUMXD덴탈의
grid-auto-columns와grid-auto-rows속성은 다음으로 크기가 할당되지 않은 트랙의 크기를 지정합니다.grid-template-rowsorgrid-template-columns.
다음은 최대 XNUMX개의 요소로 이동할 수 있는 또 다른 예입니다. 이번에는 코드를 분석해 보겠습니다. 걱정하지 마세요. 선택기가 복잡해 보일 수 있지만 논리는 매우 간단합니다.
XNUMX개의 요소가 있어도 선언은 XNUMX개만 필요했습니다. 몇 줄의 코드로 달성할 수 있는 모든 복잡하고 동적인 레이아웃을 상상해 보십시오!
무슨 일이야
grid-auto-rows왜 세 가지 값이 필요합니까? XNUMX개의 행을 정의하고 있습니까?
아니오, 우리는 세 개의 행을 정의하지 않습니다. 하지만 우리는 are 암시적 행에 대한 패턴으로 세 개의 값을 정의합니다. 논리는 다음과 같습니다.
- 하나의 행이 있으면 첫 번째 값으로 크기가 조정됩니다.
- 두 개의 행이 있는 경우 첫 번째 행은 첫 번째 값을 가져오고 두 번째 행은 두 번째 값을 얻습니다.
- 세 개의 행이 있는 경우 세 개의 값이 사용됩니다.
- XNUMX개의 행이 있는 경우(여기에 흥미로운 부분이 있음) 처음 XNUMX개의 행에 대해 XNUMX개의 값을 사용하고 네 번째 행에 대해 첫 번째 값을 다시 재사용합니다. 이것이 우리가 모든 암시적 행의 크기를 조정하기 위해 반복하는 일종의 패턴인 이유입니다.
- 100개의 행이 있는 경우 XNUMXxXNUMX 크기가 됩니다.
2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr등
같지 않은 grid-template-rows 행 수와 크기를 정의하는 grid-auto-rows 도중에 생성될 수 있는 행만 크기를 조정합니다.
예제로 돌아가면 두 개의 행이 생성될 때 논리 크기가 동일해야 합니다. 2fr 2fr), 그러나 세 번째 행이 생성되면 조금 더 작게 만듭니다.
그리드 패턴
마지막으로 패턴에 대해 이야기하겠습니다. 한 열이 다른 열보다 넓고 각 행이 해당 열의 배치를 번갈아 가며 두 개의 열 레이아웃을 본 적이 있을 것입니다.
이 정렬 레이아웃은 우리가 다루고 있는 콘텐츠의 양을 정확히 알지 못하면 너무 어려울 수 있지만 CSS Grid의 암시적 자동 배치 기능으로 인해 상대적으로 간단합니다.
코드를 살펴보십시오. 복잡해 보일 수 있지만 매우 간단하기 때문에 분해해 보겠습니다.
가장 먼저 할 일은 패턴을 식별하는 것입니다. "몇 개의 요소 후에 패턴을 반복해야 합니까?"라고 자문해 보십시오. 이 경우에는 XNUMX개의 요소마다 뒤에 있습니다. 따라서 지금은 XNUMX가지 요소만 사용하는 방법을 살펴보겠습니다.
이제 그리드를 정의하고 다음을 사용하여 일반 패턴을 설정합니다. :nth-child 요소 간 교대를 위한 선택기:
.grid {
display: grid;
grid-auto-columns: 1fr; /* all the columns are equal */
grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }우리는 패턴이 XNUMX개의 요소마다 반복된다고 말했으므로 논리적으로 사용할 것입니다. 4n + x 어디에 x 범위는 1에서 4까지입니다. 패턴을 다음과 같이 설명하는 것이 조금 더 쉽습니다.
4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.완벽하죠? 네 개의 요소가 있고 다섯 번째 요소, 아홉 번째 요소 등의 패턴을 반복합니다.
그 :nth-child 선택자는 까다로울 수 있습니다! Chris는 매우 도움이됩니다. 모든 작동 방식에 대한 설명를 포함한 다양한 패턴을 만들기 위한 레시피.
이제 다음과 같이 각 요소를 구성합니다.
- 첫 번째 요소는 두 개의 열을 가져와야 하고 열 XNUMX에서 시작해야 합니다(
grid-column: 1/span 2). - 두 번째 요소는 세 번째 열(
grid-column-start: 3). - 세 번째 요소는 첫 번째 열에 배치됩니다.
grid-column-start: 1). - 네 번째 요소는 두 개의 열을 사용하고 두 번째 열에서 시작합니다.
grid-column: 2/span 2).
다음은 CSS에 있습니다.
.grid {
display: grid;
grid-auto-columns: 1fr; /* all the columns are equal */
grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }여기서 멈추고 끝낼 수 있지만... 더 잘할 수 있습니다! 특히 일부 선언을 제거하고 그리드의 자동 배치 기능에 의존하여 작업을 수행할 수 있습니다. 이것은 grok에 가장 까다로운 부분이며 제거할 수 있는 항목을 식별할 수 있으려면 많은 연습이 필요합니다.
우리가 할 수 있는 첫 번째 일은 업데이트 grid-column: 1 /span 2 그리고 사용 grid-column: span 2 기본적으로 브라우저는 첫 번째 항목을 첫 번째 열에 배치합니다. 우리는 이것을 제거할 수도 있습니다:
.grid :nth-child(4n + 3) { grid-column-start: 1; }첫 번째, 두 번째, 네 번째 항목을 배치하면 그리드가 자동으로 세 번째 항목을 올바른 위치에 배치합니다. 이것은 우리에게 다음과 같은 것이 남아 있음을 의미합니다.
.grid {
display: grid;
grid-auto-rows: 100px; /* all the rows are equal to 100px */
grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }하지만 우리는 더 잘할 수 있습니다! 우리는 이것을 제거할 수도 있습니다:
.grid :nth-child(4n + 2) { grid-column-start: 2; }왜요? 두 번째 열에 네 번째 요소를 배치하고 두 개의 전체 열을 차지하도록 허용하면 그리드가 세 번째 암시적 열을 생성하도록 강제하여 명시적으로 알려주지 않고 총 세 개의 열을 제공합니다. 첫 번째 항목도 두 개의 열을 사용하므로 네 번째 요소는 첫 번째 행에 들어갈 수 없으므로 다음 행으로 흐릅니다. 이 구성으로 인해 첫 번째 행에는 빈 열이, 두 번째 행에는 빈 열이 남습니다.
나는 당신이 이야기의 끝을 알고 있다고 생각합니다. 브라우저는 자동으로 두 번째와 세 번째 항목을 빈 자리에 배치합니다. 따라서 코드가 훨씬 더 간단해집니다.
.grid {
display: grid;
grid-auto-columns: 1fr; /* all the columns are equal */
grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }매우 멋지고 유연한 패턴을 만들기 위해 XNUMX개의 선언만 있으면 됩니다. 최적화 부분은 까다로울 수 있지만 익숙해지고 연습을 통해 몇 가지 트릭을 얻을 수 있습니다.
왜 사용하지 않는가?
grid-template-columns열 수를 알고 있기 때문에 명시적 열을 정의하려면?
우린 할 수있어! 다음은 이에 대한 코드입니다.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
grid-column: span 2;
}보시다시피 코드는 확실히 더 직관적입니다. 세 개의 명시적 그리드 열을 정의하고 브라우저에 첫 번째 및 네 번째 요소가 두 개의 열을 취해야 한다고 알립니다. 이 접근 방식을 적극 권장합니다! 그러나 이 기사의 목표는 CSS Grid의 암시적 및 자동 배치 기능에서 얻을 수 있는 새로운 아이디어와 트릭을 탐색하는 것입니다.
명시적 접근 방식이 더 간단하지만 암시적 그리드를 사용하려면 뒤에서 CSS가 추가 작업을 수행하는 간격을 채워야 합니다. 결국, 묵시적 그리드에 대한 확실한 이해가 CSS 그리드 알고리즘을 더 잘 이해하는 데 도움이 될 것이라고 믿습니다. 결국, 우리는 명백한 것을 연구하기 위해 여기에 있는 것이 아닙니다. 우리는 야생 지역을 탐험하기 위해 여기에 있습니다!
이번에는 조금 더 빠르게 다른 패턴을 시도해 보겠습니다.
우리의 패턴은 XNUMX개의 요소마다 반복됩니다. 세 번째 및 네 번째 요소는 각각 두 개의 전체 행을 차지해야 합니다. 세 번째와 네 번째 요소를 배치하면 나머지는 건드릴 필요가 없을 것 같으니 다음과 같이 해봅시다.
.grid {
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}흠, 좋지 않습니다. 첫 번째 열에 두 번째 요소를 배치해야 합니다. 그렇지 않으면 그리드가 자동으로 두 번째 열에 배치합니다.
.grid :nth-child(6n + 2) {
grid-column: 1; /* grid-column-start: 1 */
}더 좋지만 아직 작업이 더 있습니다. 세 번째 요소를 맨 위로 이동해야 합니다. 다음과 같은 방식으로 첫 번째 행에 배치하려고 합니다.
.grid :nth-child(6n + 3) {
grid-area: 1/2/span 2;
/* Equivalent to:
grid-row-start: 1;
grid-row-end: span 2;
grid-column-start: 2
*/
}그러나 이것은 모든 것을 강제하기 때문에 작동하지 않습니다. 6n + 3 뒤죽박죽 레이아웃을 만드는 동일한 영역에 배치되는 요소. 실제 솔루션은 세 번째 요소의 초기 정의를 유지하고 추가하는 것입니다. grid-auto-flow: dense 공백을 채우기 위해. MDN에서:
[] "dense" 패킹 알고리즘이 채우기를 시도합니다. 그리드의 이전 구멍에서, 더 작은 항목이 나중에 나오는 경우. 이렇게 하면 더 큰 항목이 남긴 구멍을 채울 때 항목이 순서가 맞지 않게 나타날 수 있습니다. 생략하면 배치 알고리즘이 항목을 배치할 때 그리드에서 "앞으로"만 이동하고 구멍을 채우기 위해 백트래킹하지 않는 "희소한" 알고리즘이 사용됩니다. 이렇게 하면 나중에 항목으로 채울 수 있는 구멍이 남더라도 자동 배치된 모든 항목이 "순서대로" 표시됩니다.
이 속성이 매우 직관적이지 않다는 것을 알고 있지만 배치 문제에 직면할 때 이를 잊지 마십시오. 다른 구성을 헛되이 시도하기 전에 추가 노력 없이 레이아웃을 수정할 수 있으므로 추가하십시오.
기본적으로 이 속성을 항상 추가하지 않는 이유는 무엇입니까?
어떤 경우에는 해당 동작을 원하지 않기 때문에 권장하지 않습니다. MDN의 설명에서 더 큰 항목이 남긴 구멍을 채우기 위해 항목이 "비순서"로 흐르게 한다고 언급하는 방법에 유의하십시오. 시각적 순서는 일반적으로 특히 액세스 가능한 인터페이스와 관련하여 소스 순서만큼 중요합니다. grid-auto-flow: dense 때때로 시각적 순서와 소스 순서가 일치하지 않을 수 있습니다.
최종 코드는 다음과 같습니다.
.grid {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: dense;
grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }다른 것? 갑시다!
이 경우에는 너무 많은 이야기를 하지 않고 대신 내가 사용한 코드의 그림을 보여 드리겠습니다. 내가 그 코드에 어떻게 도달했는지 확인하십시오.
검은색 항목은 암시적으로 그리드에 배치됩니다. 내가 거기에 도달한 방법보다 더 많은 방법으로 동일한 레이아웃을 얻을 수 있다는 점에 유의해야 합니다. 그것들도 알아낼 수 있습니까? 사용하는 것은 어떻습니까? grid-template-columns? 댓글 섹션에서 작품을 공유하세요.
마지막 패턴을 남겨 드리겠습니다.
알아요 해결책이 있다 이것은 당신이 연습할 차례입니다. 우리가 배운 모든 것을 가지고 이것을 직접 코딩하고 내 솔루션과 비교하십시오. 장황한 것으로 끝나더라도 걱정하지 마십시오. 가장 중요한 것은 작동하는 솔루션을 찾는 것입니다.
더 원해?
끝내기 전에 CSS 그리드와 관련된 몇 가지 스택 오버플로 질문을 공유하고 싶습니다. 여기에서 함께 다룬 많은 기술을 사용하는 답변으로 뛰어 들었습니다. 다음과 같은 것들이 유용한 실제 사용 사례와 실제 상황이 얼마나 많은지 보여주는 좋은 목록입니다.
최대 포장
CSS 그리드는 수년 동안 주변에 있었지만 널리 논의되지 않은 잘 알려지지 않고 사용되는 트릭이 많이 있습니다. 암시적 그리드 및 자동 배치 기능이 그 중 두 가지입니다!
그리고 예, 이것은 어려울 수 있습니다! 암시적 그리드 뒤에 있는 논리를 이해하는 데 많은 시간이 걸렸고 여전히 자동 배치에 어려움을 겪고 있습니다. 명시적 및 암시적 그리드에 대해 더 많은 시간을 할애하고 싶다면 확인해볼 가치가 있는 몇 가지 추가 설명과 예가 있습니다.
마찬가지로 다음을 읽고 싶을 수도 있습니다. grid-auto-columns CSS-Tricks Almanac에서 Mojtaba Seyedi가 매우 자세하게 설명하고 동작을 설명하는 데 도움이 되는 믿을 수 없을 정도로 유용한 시각 자료를 포함하기 때문입니다.
시작할 때 말했듯이 여기에서 다루는 방법은 그리드 구축에 대해 이미 알고 있는 일반적인 방법을 대체하기 위한 것이 아닙니다. 어떤 경우에는 도움이 될 수 있는 다양한 방법을 모색하고 있습니다.
