CSS 그리드: 사용자 정의 그리드 항목 배치 - 기본 이상

여보세요. 이전 기사에서는 그리드 내부에 사용자 지정 그리드 항목을 배치하는 기본 방법에 대해 설명했습니다. 오늘은 그리드 항목 사용자 지정 배치 CSS 속성을 문자열 인수와 함께 사용하는 모든 경우를 설명하여 이 주제를 확장하려고 합니다.

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


지금까지 그리드 항목 사용자 지정 배치 CSS 속성(grid-row/column-start/end 및 해당 속기)과 함께 사용되는 몇 가지 기본 인수 조합을 다루었습니다. 오늘 저는 문자열 인수를 포함하는 가능한 모든 조합에 초점을 맞추고 싶습니다.

동일한 규칙이 여러 항목과 두 번째 차원에 적용될 수 있으므로 오늘 제시된 모든 예는 단일 그리드 항목과 단일 차원으로 단순화됩니다.

문자열을 단일 인수로 사용합니다.

문자열 인수는 그리드 선 이름(있는 경우)을 참조합니다. 문자열을 단일 인수로 사용하는 경우 이러한 줄 이름에는 추가 접두사(그리드 행/열 시작의 경우 -start 및 그리드 행/열 끝의 경우 -end)가 포함되어야 합니다.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [line] 1fr [line line-start] 1fr [line] 1fr [line line-end] 1fr [line];
}

.item {
  grid-column-start: line;
  grid-column-end: line;
}

모눈 항목이 차지하는 예상 모눈 영역의 크기를 결정하는 동안 접두사가 없는 줄이 어떻게 무시되는지 확인하십시오.

필요한 접두사가 있는 줄이 없는 경우 문자열과 동일한 이름을 가진 첫 번째 줄이 사용됩니다(왼쪽 또는 위쪽 그리드 가장자리에서 계산). 그러나 이것은 -start 접두사 및 grid-row/column-start 속성에만 적용됩니다.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1] 1fr [col2] 1fr [col3 line] 1fr [col4] 1fr [col5 line];
}

.item {
  grid-column-start: line;
  grid-column-end: line;
}

-end 접두사 라인 이름이 발견되지 않았기 때문에 grid-column-end 속성이 어떻게 기본값(col4)으로 떨어지는지 확인하십시오.

숫자가 포함된 문자열 인수입니다.

우리가 사용할 수 있는 또 다른 조합은 숫자가 있는 문자열 인수입니다. 이 조합은 문자열과 동일한 이름을 가진 n번째 줄을 참조합니다(왼쪽 또는 위쪽 그리드 가장자리부터 계산). 여기서 n은 숫자 인수와 같습니다.

인수 순서는 관련이 없습니다.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1 line] 1fr [col2 line] 1fr [col3 line] 1fr [col4 line] 1fr [col5 line];
}

.item {
  grid-column-start: 2 line;
  grid-column-end: line 5;
}

음수 인수가 허용됩니다. 이러한 경우 주어진 이름을 가진 행은 그리드의 오른쪽에서 왼쪽(또는 아래에서 위로) 가장자리로 검색됩니다.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1 line] 1fr [col2 line] 1fr [col3 line] 1fr [col4 line] 1fr [col5 line];
}

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

number 인수가 주어진 차원의 라인 수보다 크면 모든 암시적 라인(존재하는 경우)에 이러한 이름이 포함되어 있다고 가정합니다.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1 line] 1fr [col2 line] 1fr [col3 line] 1fr [col4 line] 1fr [col5 line];
  grid-auto-columns: 20px;
}

.item {
  grid-column-start: 4 line;
  grid-column-end: 7 line;
}  

그리드 오른쪽의 좁은 열은 암시적입니다.

span 키워드가 있는 문자열 인수입니다.

span 키워드와 함께 문자열 인수를 사용할 수도 있습니다. 이 조합은 그리드의 왼쪽(또는 위쪽) 가장자리에서 시작하여 문자열과 동일한 이름을 가진 첫 번째 줄을 나타냅니다.

그러나 string 인수와 span의 조합을 효과적으로 사용하려면 -start 및 -end 속성을 모두 정의해야 하며 그 중 하나만 span 키워드를 포함해야 합니다.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4] 1fr [col5];
}

.item {
  grid-column-start: col2;
  grid-column-end: span col4;
}

또한 문자열과 함께 span 키워드를 사용하는 경우에는 -end 속성이 참조하는 줄 번호가 -start 속성이 참조하는 줄 번호보다 크지 않아야 합니다.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4] 1fr [col5];
}

.item {
  /* invalid: -start property refers to line 5, -end property refers to line 1 */
  grid-column-start: col5;
  grid-column-end: span col1;
}

인수의 조합은 훨씬 더 복잡할 수 있습니다. 이전 범위 + 문자열 조합을 숫자와 함께 사용할 수 있습니다. 이것은 숫자가 음수가 될 수 없다는 점을 제외하면 숫자와 함께 문자열 인수를 사용하는 것과 유사합니다!

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1] 1fr [col2] 1fr [line col3] 1fr [line col4] 1fr [line col5];
}

.item {
  grid-column-start: col2;
  grid-column-end: span line 2;
}

유사하게 number 인수가 주어진 차원의 행 수보다 크면 모든 암시적 행(존재하는 경우)에 해당 이름이 포함된다고 가정합니다.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1] 1fr [col2] 1fr [line col3] 1fr [line col4] 1fr [line col5];
  grid-auto-columns: 20px;
}

.item {
  grid-column-start: col2;
  grid-column-end: span line 5;
}

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


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