그리드 명명 영역을 사용하여 레이아웃 시각화(및 참조)

CSS 그리드를 사용하여 단순하거나 복잡한 레이아웃을 만들 때마다 일반적으로 항목을 줄 번호로 배치합니다. 그리드 레이아웃에는 양수 및 음수 라인 번호로 자동으로 인덱싱되는 그리드 라인이 포함되어 있습니다. 명시적으로 이름을 지정). 줄 번호로 항목을 배치하는 것은 항목을 배치하는 좋은 방법이지만 CSS Grid에는 크기가 작은 인지 장애로 동일한 작업을 수행할 수 있는 다양한 방법이 있습니다. 그 방법 중 하나는 "ASCII" 방법이라고 생각하는 것입니다.

간단히 말해서 ASCII 방식

방법은 다음을 사용하는 것으로 귀결됩니다. grid-template-areas 줄 번호가 아닌 그리드 컨테이너 수준에서 사용자 지정 이름 영역을 사용하여 그리드 항목을 배치합니다.

다음을 사용하여 요소를 그리드 컨테이너로 선언할 때 display: grid, 그리드 컨테이너는 기본적으로 그리드 항목을 충분히 보유하는 단일 열 트랙과 행을 생성합니다. 그리드 레이아웃에 참여하는 컨테이너의 자식 요소는 그리드 항목에 관계없이 그리드 항목으로 변환됩니다. display 재산.

예를 들어 다음을 사용하여 열과 행을 명시적으로 정의하여 그리드를 생성해 보겠습니다. grid-template-columns 및 grid-template-rows 속성.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 200px);
}

CSS의 이 작은 조각은 그리드 항목이 열에서 동일한 공간을 차지하는 3×2 그리드를 생성하고 그리드에 트랙 크기가 200px.

다음으로 전체 레이아웃을 정의할 수 있습니다. 명명된 그리드 영역 를 사용하여 grid-template-areas 재산. 에 따르면 사양, 초기 값 grid-template-areas is none.

grid-template-areas = none | <string>+

<string>+ 따옴표로 묶인 문자열 그룹을 나열합니다. 각 문자열은 셀로 표시되고 인용된 각 문자열은 행으로 표시됩니다. 이와 같이:

grid-template-areas: "head head" "nav main" "foot foot";

의 가치 grid-template-areas 네 개의 그리드 영역이 있는 레이아웃을 설명합니다. 그들은,

• head
• nav
• main
• foot

head 및 foot 두 개의 열 트랙과 하나의 행 트랙에 걸쳐 있습니다. 남은 nav 및 main 각각은 하나의 열 트랙과 하나의 행 트랙에 걸쳐 있습니다. 의 가치 grid-template-areas ASCII 문자를 배열하는 것과 매우 유사합니다. 크리스가 제안한 얼마 전 우리는 CSS 자체에서 레이아웃의 전체 구조를 시각화하여 이해할 수 있는 가장 문제 없는 방법을 얻을 수 있었습니다.

자, 네 개의 명명된 그리드 영역으로 레이아웃을 만들었습니다. head, nav, main, foot.

이제 줄 번호 대신 명명된 그리드 영역에 대해 그리드 항목의 위치를 ​​지정해 보겠습니다. 구체적으로 header 요소를 명명된 그리드 영역으로 head 명명된 그리드 영역을 지정합니다. head FBI 증오 범죄 보고서 header 요소를 사용하여 grid-area 재산.

그리드 레이아웃에서 명명된 그리드 영역은 ID. 그래서 우리가 방금 한 것은 head 특정 그리드 트랙에 항목을 배치하는 데 사용할 수 있습니다.

header { grid-area: head; }

다른 사용자 정의 ID를 사용하여 다른 HTML 요소를 사용할 수 있습니다.

nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: foot; }

명명된 영역 값 쓰기

에 따르면 CSS 그리드 레이아웃 모듈 레벨 1, 모든 문자열은 다음 토큰 아래에 정의되어야 합니다.

• 명명된 셀 토큰: 그리드의 명명된 그리드 영역을 나타냅니다. 예를 들어, head 명명된 셀 토큰입니다.
• 널 셀 토큰: 이것은 그리드 컨테이너에서 명명되지 않은 그리드 영역을 나타냅니다. 예를 들어, 그리드의 빈 셀은 null 셀 토큰입니다.
• 쓰레기 토큰: 잘못된 선언과 같은 구문 오류입니다. 예를 들어, 그리드 항목의 수에 비해 셀과 행의 수가 다르면 선언이 유효하지 않게 됩니다.

In grid-template-area, 인용된 모든 문자열(행)은 동일한 수의 셀을 가져야 하며 셀을 무시하지 않고 완전한 그리드를 정의해야 합니다.

셀을 무시하거나 그대로 둘 수 있습니다. 빈 셀 마침표(.)

.grid { 
  display: grid;
  grid-template-areas:
    "head head"
    "nav main"
    "foot .";
}

시각적으로 어색하거나 불균형하게 느껴진다면 공백 없이 여러 개의 마침표 문자를 사용할 수 있습니다.

.grid {
  display: grid;
  grid-template-areas:
    "head head"
    "nav main"
    "foot ....";
}

명명된 셀 토큰은 여러 그리드 셀에 걸쳐 있을 수 있지만 이러한 셀은 직사각형 레이아웃을 형성해야 합니다. 다시 말해서, 사양은 가능하지만 "L" 또는 "T" 모양의 레이아웃을 만들 수 없습니다. 지원에 대한 힌트 미래에 연결되지 않은 영역이 있는 직사각형이 아닌 레이아웃의 경우.

ASCII는 줄 기반 배치보다 낫습니다.

라인 기반 배치는 우리가 사용하는 곳입니다 grid-column 및 grid-row 자동으로 숫자로 인덱싱되는 그리드 라인 번호를 사용하여 그리드에 요소를 배치하는 속성:

.grid-item {
  grid-column: 1 / 3; /* start at grid column line 1 and span to line 3 */
}

그러나 레이아웃이 중단점에서 변경되면 그리드 항목 행 번호가 변경될 수 있습니다. 이러한 경우 특정 중단점에서 사용한 것과 동일한 줄 번호에 의존할 수 없습니다. 여기에서 코드를 이해하기 위해 추가적인 인지적 부담이 필요합니다.

그렇기 때문에 ASCII 기반 접근 방식이 가장 잘 작동한다고 생각합니다. 다음을 사용하여 각 중단점에 대한 레이아웃을 재정의할 수 있습니다. grid-template-areas 레이아웃이 CSS에서 직접 표시되는 방식에 대한 편리한 시각을 제공하는 그리드 컨테이너 내에서 — 자체 문서화된 코드와 같습니다!

.grid {
  grid-template-areas:
    "head head"
    "nav main"
    "foot ...."; /* much easier way to see the grid! */
}

.grid-item {
  grid-area: foot; /* much easier to place the item! */
}

DevTools에서 그리드의 라인 번호와 그리드 영역을 실제로 볼 수 있습니다. 예를 들어 Firefox에서 레이아웃 패널로 이동합니다. 그런 다음 아래에서 그리드 탭에서 "격자 표시 설정" 그리고 "줄 번호 표시" 및 "표시 영역 이름" 옵션을 제공합니다.

명명된 영역을 사용하는 이 ASCII 접근 방식은 요소의 배치를 시각화하고 쉽게 찾는 데 훨씬 적은 노력이 필요합니다.

"보편적인" 사용 사례를 살펴보겠습니다.

명명된 그리드 영역에 대한 자습서를 볼 때마다 일반적인 예는 일반적으로 다음을 포함하는 레이아웃 패턴입니다. header, main, sidebar및 footer 지역. 나는 이것을 "보편적인" 유스 케이스로 생각하고 싶습니다. 그 이유는 그물이 매우 넓기 때문입니다.

방법을 보여주는 좋은 예입니다. grid-template-areas 작동하지만 실제 구현에는 일반적으로 특정 뷰포트 너비에서 레이아웃을 변경하도록 설정된 미디어 쿼리가 포함됩니다. 다시 선언해야 하는 것보다 grid-area 모든 것을 재배치하기 위해 각 중단점의 각 그리드 항목에서 다음을 사용할 수 있습니다. grid-template-areas 대신 중단점에 "응답"하고 프로세스의 각 중단점에서 레이아웃의 멋진 시각을 얻으십시오!

레이아웃을 정의하기 전에 다음을 사용하여 각 요소에 ident를 할당합시다. grid-area 속성을 기본 스타일로 사용합니다.

header {
  grid-area: head;
}

.left-side {
  grid-area: left;
}

main {
  grid-area: main;
}

.right-side {
  grid-area: right;
}

footer {
  grid-area: foot;
}

이제 레이아웃을 기본 스타일로 다시 정의해 보겠습니다. 기본적으로 스택이 쌓이도록 모바일 우선 접근 방식을 사용할 것입니다.

.grid-container {
  display: grid;
  grid-template-areas:
    "head"
    "left"
    "main"
    "right"
    "foot";
}

각 그리드 항목은 자동 크기 조정 조금 이상해 보이는 이 구성에서 min-height: 100vh 더 많은 작업 공간을 제공하기 위해 그리드 컨테이너에서 다음을 수행합니다.

.grid-container {
  display: grid;
  grid-template-areas:
    "head"
    "left"
    "main"
    "right"
    "foot";
  min-height: 100vh;
}

이제 우리가 원한다고 가정 해 봅시다. main 스택의 오른쪽에 앉을 요소 left 및 right 뷰포트 너비가 약간 더 넓어지면 사이드바가 표시됩니다. 우리는 다시 선언합니다 grid-template-areas 업데이트된 ASCII 레이아웃으로 다음을 얻을 수 있습니다.

@media (min-width: 800px) {
  .parent {
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: 100px 1fr 1fr 100px;
    grid-template-areas:
      "head head"
      "left main"
      "right main"
      "foot foot";
  }
}

나는 순전히 미학을 위해 약간의 열과 행 크기를 거기에 던졌습니다.

브라우저가 더 넓어지면 레이아웃을 다시 변경하고 싶을 수 있습니다. main 사이에 끼어있다. left 및 right 사이드바. 레이아웃을 시각적으로 작성하자!

.grid-container {
  grid-template-columns: 200px 1fr 200px; /* again, just for sizing */
  grid-template-areas:
    "head head head"
    "left main right"
    "left main right"
    "foot foot foot";
}

유연성을 위해 암시적 라인 이름 활용

사양에 따르면, grid-template-areas 명명된 그리드 영역에 의해 생성된 그리드 선의 이름을 자동으로 생성합니다. 추가 작업 없이 무료로 명명되기 때문에 이러한 암시적으로 명명된 그리드 선이라고 합니다.

모든 명명된 그리드 영역은 XNUMX개의 암시적으로 명명된 그리드 선을 가져옵니다. XNUMX개는 열 방향으로, XNUMX개는 행 방향으로, 여기서 -start 및 -end ident에 추가됩니다. 예를 들어, head 가져옵니다 head-start 및 head-end 암시적으로 명명된 총 XNUMX개의 그리드 라인에 대해 양방향으로 라인을 생성합니다.

우리는 이 라인을 유리하게 사용할 수 있습니다! 예를 들어 요소를 오버레이하려면 main, left및 right 우리 그리드의 영역. 이전에 레이아웃이 직사각형이어야 하는 방법에 대해 이야기했습니다. "T" 및 "L" 모양의 레이아웃은 허용되지 않습니다. 결과적으로 ASCII 시각적 레이아웃 방법을 사용하여 오버레이를 배치할 수 없습니다. 그러나 동일한 것을 사용하여 암시적 라인 이름을 사용할 수 있습니다. grid-area 다른 요소를 배치하는 데 사용하는 오버레이의 속성입니다.

당신은 알고 계십니까 grid-area 는 일종의 약식 속성입니다. margin 및 padding 속기 속성입니까? 동일한 방식으로 여러 값을 취하지만 다음과 같은 "시계 방향"을 따르는 대신, margin - 순서대로 진행 margin-block-start, margin-inline-end, margin-block-end및 margin-inline-start - grid-area 다음과 같이갑니다.

grid-area: block-start / inline-start / block-end / inline-end;

그러나 우리는 블록 및 인라인 방향이 아니라 행과 열에 대해 이야기하고 있습니다. 맞습니까? 글쎄, 그들은 서로 일치합니다. 행 축은 블록 방향에 해당하고 열 축은 인라인 방향에 해당합니다.

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

오버레이 요소를 레이아웃에서 그리드 항목으로 배치하는 것으로 돌아가십시오. 그만큼 grid-area 속성은 암시적으로 명명된 그리드 라인을 사용하여 요소를 배치하는 데 도움이 됩니다.

.overlay {
  grid-area: left-start / left-start / right-end / main-end;
}

최소한의 그리드 시스템 만들기

방금 본 "보편적인" 사용 사례와 같은 레이아웃에 집중할 때 그리드 영역을 요소당 하나의 영역으로 생각하고 싶은 유혹이 있습니다. 하지만 그렇게 작동할 필요는 없습니다. 레이아웃에서 더 많은 공간을 확보하기 위해 ident를 반복할 수 있습니다. 우리는 우리가 반복했을 때 그것을 보았습니다. head 및 foot 마지막 예의 idents:

.grid-container {
  grid-template-areas:
    "head head head"
    "left main right"
    "left main right"
    "foot foot foot";
}

그것을주의해라 main, left및 right 블록 방향으로도 반복됩니다.

전체 페이지 레이아웃은 잊어버리고 구성 요소에서 명명된 그리드 영역을 사용합시다. 그리드는 전체 페이지만큼 구성 요소 레이아웃에 적합합니다!

다음은 일련의 이미지와 다른 텍스트 블록을 자랑하는 꽤 표준적인 영웅 구성 요소입니다.

HTML은 매우 간단합니다.

<div class="hero">
  <div class="image">
    <img src="..." alt="" />
  </div>
  <div class="text">
    <!-- ... -->
  </div>
</div>

우리는 정말 빠른 스택 레이아웃을 위해 이것을 할 수 있습니다:

.hero {
  grid-template-areas:
    "image"
    "text";
}

그러나 우리는 몇 가지를 위해 도달해야합니다 padding, max-width 또는 이미지 행보다 텍스트 영역을 좁게 만들 수 있습니다. 두 행에서 idents를 반복하는 대신 ASCII 레이아웃을 XNUMX열 그리드로 확장하는 것은 어떻습니까?

.hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* maintain equal sizing */
  grid-template-areas:
    "image image image image"
    "text  text  text  text";
}

자, 이제 그리드 항목을 명명된 영역에 배치할 수 있습니다.

.hero .image {
  grid-area: image;
}

.hero .text {
  grid-area: text;
}

지금까지는 아주 좋습니다. 두 행이 전체 너비를 차지합니다. 이를 작은 화면의 기본 레이아웃으로 사용할 수 있습니다.

하지만 뷰포트가 더 큰 너비에 도달할 때 더 좁은 텍스트를 도입하고 싶을 수도 있습니다. 마침표 문자에 대해 알고 있는 정보를 사용하여 열을 "건너뛰기"할 수 있습니다. 하자 text ident 이 경우 첫 번째와 마지막 열을 건너뜁니다.

@media (min-width: 800px) {
  main {
    grid-template-columns: repeat(6, 1fr); /* increase to six columns */
    grid-template-areas:
      "image image image image image image"
      "..... text  text  text  text  .....";
  }
}

이제 원하는 간격이 있습니다.

더 큰 중단점에서 레이아웃을 추가로 조정해야 하는 경우 더 많은 열을 추가하고 거기에서 이동할 수 있습니다.

.hero {
  grid-template-columns: repeat(8, 1fr);
  grid-template-areas:
    "image image image image image image image image"
    "..... text  text  text  text  text  text  .....";
}

개발 도구 시각화:

CSS 프레임워크에서 12열 및 16열 레이아웃이 가장 중요했던 때를 기억하십니까? 빠르게 확장하고 코드에서 멋진 시각적 ASCII 레이아웃을 유지할 수 있습니다.

main {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "image image image image image image image image image image image image"
    "..... text  text  text  text  text  text  text  text  text  text  .....";
}

좀 더 복잡한 것을 보자

우리는 하나의 상당히 일반적인 예와 하나의 비교적 간단한 예를 살펴보았습니다. 더 복잡한 레이아웃으로 여전히 멋진 ASCII 레이아웃 시각화를 얻을 수 있습니다.

다음과 같이 작업해 보겠습니다.

나는 이것을 HTML의 두 요소로 나눴습니다. header 및 main:

<header>
  <div class="logo"> ... </div>
  <div class="menu"> ... </div>
</header>
<main>
  <div class="image"> ... </div>
  <h2> ... </h2>
  <div class="image"> ... </div>
  <div class="image"> ... </div>
</main>

flexbox가 더 적합하다고 생각합니다. header 그런 식으로 자식 요소를 쉽게 배치할 수 있기 때문입니다. 그래서 안돼 grid 그곳에:

header {
  display: flex;
  justify-content: space-between;
  /* etc. */
}

그러나 grid 에 잘 맞습니다. main 요소의 레이아웃. 레이아웃을 정의하고 위치를 지정하는 데 필요한 해당 요소에 ident를 할당해 보겠습니다. .text 세 .image 집단. 작은 화면에 대한 기준으로 이것을 시작하겠습니다.

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "image1 image1 .....  image2"
    "texts  texts  texts  texts"
    ".....  image3 image3 .....";
}

우리가 어디로 가고 있는지 이미 알 수 있습니다. 맞죠? 레이아웃이 시각화되어 사용자 정의 ID를 사용하여 그리드 항목을 제자리에 놓을 수 있습니다.

.image:nth-child(1) {
  grid-area: image1;
}

.image:nth-last-child(2) {
  grid-area: image2;
}

.image:nth-last-child(1) {
  grid-area: image3;
}

h2 {
  grid-area: texts;
}

이것이 우리의 기본 레이아웃이므로 더 넓은 중단점을 살펴보겠습니다.

@media (min-width: 800px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas:
      ". image1 image1 ...... ......  ...... image2 ."
      ". texts  texts  texts  texts   texts  image2 ."
      ". .....  image3 image3 image3  image3 ...... .";
  }
}

레이아웃이 코드에 바로 있기 때문에 그것이 어떻게 보일지 정확히 알고 있을 것입니다!

더 확장하기로 결정한 경우에도 동일한 거래:

.grid {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    ". image1 image1 .....  .....   .....  .....  .....  .....  .....  .....  ."
    ". texts  texts  texts  texts   texts  texts  texts  texts  texts  image2 ."
    ". .....  image3 image3 image3  image3 .....  .....  .....  .....  .....  .";
}

전체 데모는 다음과 같습니다.

나는 "네거티브 margin hack'을 사용하여 첫 번째 이미지가 제목과 겹치도록 합니다.

최대 포장

다른 사람이 사용하고 있는지 궁금합니다. grid-template-areas 그리드 레이아웃의 ASCII 시각 효과를 위해 명명된 영역을 생성합니다. 내 CSS 코드에서 이를 참조로 사용하면 줄 번호를 처리할 때 훨씬 더 복잡했을 수 있는 일부 복잡한 디자인의 신비를 푸는 데 도움이 되었습니다.

그러나 이 방법으로 그리드 레이아웃을 정의하면 이 게시물 전체에서 본 CSS 그리드에 대한 몇 가지 흥미로운 사실을 알 수 있습니다.

• XNUMXD덴탈의 grid-template-areas 속성을 사용하면 사용자 지정 ident 또는 "명명된 영역"을 만들고 이를 사용하여 그리드 항목을 배치하는 데 사용할 수 있습니다. grid-area 재산.
• 세 가지 유형의 "토큰"이 있습니다. grid-template-areas 명명된 셀 토큰, 널 셀 토큰 및 휴지통 셀 토큰을 포함한 값으로 허용합니다.
• 에 정의된 각 행 grid-template-areas 같은 수의 세포가 필요합니다. 단일 셀을 무시해도 레이아웃이 생성되지 않습니다. 쓰레기 토큰으로 간주됩니다.
• 그리드 레이아웃의 시각적 ASCII와 유사한 다이어그램을 얻을 수 있습니다. grid-template-areas 그리드 레이아웃을 정의하는 동안 명명된 셀 토큰 사이에 필수 공백을 사용하여 속성 값.
• null 셀 토큰 내부에 공백이 없는지 확인합니다(예: .....). 그렇지 않으면 null 셀 토큰 사이의 단일 공백으로 인해 불필요한 빈 셀이 생성되어 레이아웃이 잘못됩니다.
• 다음을 사용하여 그리드 항목을 재배치하여 다양한 중단점에서 레이아웃을 재정의할 수 있습니다. grid-area, 다음을 사용하여 레이아웃을 다시 선언합니다. grid-template-areas 그리드 컨테이너에서 필요한 경우 트랙 목록을 업데이트합니다. 그리드 항목을 만질 필요가 없습니다.
• 사용자 정의 명명된 그리드 영역은 자동으로 XNUMX개의 암시적으로 할당된 라인 이름을 얻습니다. <custom-ident>-start 및 <custom-ident>-end 열과 행 방향 모두에서.