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

여보세요. 오늘의 기사에서는 그리드 내부의 그리드 항목의 사용자 지정 배치에 대해 말씀드리고자 합니다. 대부분의 경우 자동 배치 알고리즘에 의해 관리되는 기본 그리드 항목 배치는 레이아웃 기대치를 충족하지 못합니다. 운 좋게도 우리는 그것에 대해 뭔가를 할 수 있으며 방법을 보여 드리겠습니다.

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


이전 기사에서 모든 그리드 항목은 기본적으로 특정 순서로 고유한 단일 그리드 셀에 할당된다고 언급했습니다. 실제로 이 동작을 덮어쓰고 그리드 내부의 그리드 셀이나 그리드 영역에 항목을 할당할 수 있습니다.



이 항목의 기본 배치를 왼쪽 상단 셀에서 오른쪽 하단 셀로 어떻게 변경했는지 확인하십시오.

CSS 그리드 사용자 정의 배치 속성.

원하는 사용자 정의 배치를 달성하기 위해 네 가지 주요 CSS 속성을 사용할 수 있습니다.

그리드 행 시작

그리드 행 끝

그리드 열 시작

그리드 열 끝

이러한 네 가지 속성은 그리드 내의 그리드 선을 나타냅니다. 선택한 항목을 할당할 선택한 영역의 경계입니다.

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

모든 속성을 정의할 필요는 없습니다. 우리는 하나 또는 네 가지 모두를 정의할 수 있습니다. 누락된 라인은 자동으로 결정됩니다.

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

나열된 각 속성은 동일한 값을 가질 수 있습니다. 이것들은:

전역 CSS 키워드(상속, 초기, 되돌리기, 레이어 되돌리기, 설정 해제)

CSS 그리드별 값: 키워드 'auto' 또는 숫자, 문자열 및 키워드 'span'의 일부 조합

전역 CSS 키워드는 CSS의 여러 속성 간에 공유되므로 이 문서에서는 다루지 않습니다. 여기서는 CSS 그리드 관련 값에만 집중하고 싶습니다.

키워드 '자동'은 격자선이 자동 배치 알고리즘에 의해 자동으로 결정됨을 의미합니다.

숫자는 단순히 주어진 방향의 줄 번호를 나타냅니다. 숫자는 음수가 될 수 있지만 0이 될 수는 없습니다.

문자열 인수는 그리드 선 이름(있는 경우)을 나타냅니다.

'스팬'이라는 키워드는 우리가 거리를 다루고 있다는 것을 의미합니다. 대부분의 경우 범위 뒤에는 숫자나 단어가 옵니다. 다음 부분이 없는 Span 키워드는 허용되지 않습니다.

몇 가지 예를 살펴보겠습니다.

.container {
  ...
  grid-template-rows: [row-one] 1fr [row-two] 1fr [row-three] 1fr [row-four];
  grid-template-columns: [col-one] 1fr [col-two] 1fr [col-three] 1fr [col-four];
}

.item {
  grid-row-start: 1;
  grid-row-end: row-three;
  grid-column-start: auto;
  grid-column-end: col-three;
}

.container {
  ...
  grid-template-rows: [row-one] 1fr [row-two] 1fr [row-three] 1fr [row-four];
  grid-template-columns: [col-one] 1fr [col-two] 1fr [col-three] 1fr [col-four];
}

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

언급된 값의 더 많은 허용 가능한 조합이 있습니다. 예를 들어 문자열 + 숫자 또는 범위 + 문자열 + 숫자와 같은 조합을 찾을 수 있습니다. 나는 미래의 'beyond basics' 기사에서 그들에 대해 더 많이 이야기하고 싶습니다.

속기 속성.

둘 이상의 그리드 선을 지정해야 하는 경우 grid-row, grid-column 또는 grid-area와 같은 몇 가지 특수 속기 속성을 사용할 수 있습니다.

속기 속성은 슬래시 또는 슬래시를 사용하여 구분된 위에서 설명한 것과 동일한 값을 허용합니다.

Grid-row 및 grid-colum 속성을 사용하면 주어진 방향에서 시작 및 끝 그리드 선을 모두 정의할 수 있습니다. 누락된 정의는 자동으로 대체됩니다.

.container {
  ...
  grid-template-rows: [row-one] 1fr [row-two] 1fr [row-three] 1fr [row-four];
  grid-template-columns: [col-one] 1fr [col-two] 1fr [col-three] 1fr [col-four];
}

.item {
  grid-row: 1 / row-three;
  grid-column: col-two / span 2;
}

Grid-area 속성을 사용하면 4개의 그리드 라인 경계를 동시에 정의할 수 있습니다. 이러한 정의는 슬래시로 구분되며 맨 위 줄에서 시작하여 시계 반대 방향으로 진행됩니다.

.container {
  ...
  grid-template-rows: [row-one] 1fr [row-two] 1fr [row-three] 1fr [row-four];
  grid-template-columns: [col-one] 1fr [col-two] 1fr [col-three] 1fr [col-four];
}

.item {
  grid-area: 2 / 1 / span 2 / col-three;
}

grid-area 속성은 한 번에 네 개의 그리드 선을 모두 정의하도록 강제하지 않습니다. 향후 기사에서는 하나(또는 그 이상) 정의가 누락된 경우 어떤 일이 발생하는지, 그리고 이 속성이 제공해야 하는 다른 배치 관련 기능은 무엇인지 보여줄 것입니다.


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


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