CSS 그리드: 사용자 정의 그리드 항목 배치 — 그리드 템플릿

여보세요. 오늘의 기사는 그리드 내부의 사용자 지정 그리드 항목 배치에 대한 마지막 기사입니다. 이전에는 grid-row(column)-start(end) CSS 속성(및 약어)을 사용하여 기본 그리드 항목 위치를 변경하는 방법을 주로 설명했습니다. 이제 그리드 템플릿의 개념을 기반으로 다른 접근 방식을 보여드리고자 합니다.

이 기사는 내 CSS 그리드 소개 시리즈의 일부입니다. 이전 게시물을 확인하려면 전체 목차를 찾을 수 있습니다.

grid-area 속성을 사용하여 그리드 항목 이름 지정.

논의된 방법에서는 위치를 사용자 정의해야 하는 모든 그리드 항목에 자체 이름이 포함되어야 합니다. 내가 설명한 것과 동일한 그리드 영역 CSS 속성을 사용하여 그리드 항목의 이름을 지정할 수 있습니다.

이미 언급한 인수 외에도 이 속성은 이 그리드 항목의 이름 역할을 하는 유형custom-ident의 단일 인수를 사용합니다.

.grid-item {
  grid-area: myCustomName;
}

grid-template-areas 속성을 사용하여 명명된 그리드 항목의 위치 지정.

각 요소의 이름을 지정한 후 해당 이름을 사용하여 그리드 템플릿을 정의할 수 있습니다. 이는 그리드 컨테이너 요소의 속성인 grid-template-areas CSS 속성으로 수행할 수 있습니다.

이 기사에 제시된 모든 예는 다음과 같은 공통 정의를 공유한다는 점을 명심하십시오.

.container {
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(5, 1fr);
}

.grid-item {
  grid-area: item;
}

그리드 템플릿은 일종의 컨테이너 그리드 표현입니다. 그러나 그 크기는 컨테이너 그리드의 크기와 일치할 필요는 없으며 더 크거나 작을 수 있습니다. 이전에 정의된 이름을 사용하여 실제 그리드의 배치에 해당하는 템플릿 내부의 각 그리드 배치를 계획할 수 있습니다.

grid-template-areas 속성은 비어 있지 않은 문자열 인수를 얼마든지 사용합니다. 모든 인수는 위에서부터 그리드의 단일 행을 나타냅니다. 행의 셀은 공백을 사용하여 구분되며 이름 또는 점의 두 값 중 하나일 수 있습니다. 이름은 명명된 그리드 항목을 참조하고 점은 그리드 항목이 차지하지 않는 빈 셀을 나타냅니다.

.container {
  grid-template-areas: 
    ". . . . ."
    ". . item . ."
    ". . . . ."
    ". . . . ."
    ". . . . .";
}

.container {
  grid-template-areas: 
    ". . . . ."
    ". . item . ."
    ". . . . .";
}

두 번째 예는 grid-template-areas 속성(3)의 여러 문자열 인수가 그리드(5)에 정의된 행 수와 일치할 필요가 없음을 보여줍니다.

각 행에는 원하는 수의 셀이 포함될 수 있지만 이 수는 모든 행에서 동일해야 합니다.

.container {
  /* invalid: number of cells in rows are different */
  grid-template-areas: 
    ". ."
    ". . item . ."
    ". . . . . . . . . . .";
}

.container {
  grid-template-areas: 
    ". . ."
    ". item ."
    ". . .";
}

각 행의 셀 수는 그리드에 정의된 열 수와 일치하지 않아도 됩니다.

그리드 템플릿의 인접한 이름(열과 행 사이 모두)이 동일하면 그리드 항목이 적절한 그리드 영역에 할당됩니다.

.container {
  grid-template-areas: 
    ". . . . ."
    ". item item . ."    
    ". item item . ."
    ". . . . ."    
    ". . . . .";
}

인접한 이름 그룹은 직사각형 모양을 형성해야 합니다. 그렇지 않으면 이러한 레이아웃이 유효하지 않습니다.

.container {
  /* invalid: adjacent names not form rectangular shape */
  grid-template-areas: 
    "item . . . ."
    "item item . . ."    
    "item item item . ."
    ". . . . ."    
    ". . . . .";
}

선택한 그리드 영역(또는 그리드 셀)에 그리드 항목을 할당하면 이 영역의 경계를 정의하는 선에 자동으로 적절한 이름이 부여됩니다. 이러한 이름은 다음 공식에 따라 구성됩니다. item name + prefix .

.container {
  grid-template-areas:
    ". . . . ."    
    ". . . . ."
    "item item . . ."
    "item item . . ."
    ". . . . .";
  }
}

짧은 글 읽어주셔서 감사합니다. 이와 같은 더 많은 콘텐츠를 읽고 싶다면 내 dev.to 또는 계정을 팔로우할 수 있습니다. 또한 어떤 형태로든 피드백을 제공해주세요. 나는 당신의 의견을 읽고 싶습니다. 다음 기사에서 곧 만나요!


추신. 제 작업을 지원하고 싶다면 커피 한 잔에 감사하겠습니다. 고맙습니다. ❤️