행을 여러 열로 확장

CSS 그리드의 행은 적절한 그리드 속성을 사용하여 여러 열을 포함하도록 구성할 수 있습니다. 이를 달성하는 방법은 다음과 같습니다.

줄 기반 배치:

가장 일반적인 접근 방식은 열 시작 및 끝 줄을 지정하는 줄 기반 배치를 사용하는 것입니다.

grid-column: 1 / 4;  // Spans columns 1, 2, and 3

명시적인 그리드 영역:

점유된 셀을 명시적으로 정의하는 Grid-area 속성을 사용합니다:

grid-area: 1 / 2 / span 3;  // Spans 3 columns from row 1, column 2

음수 값:

grid-column 또는 Grid-column-start의 음수 값은 오른쪽에 사용할 수 있습니다. 왼쪽으로 배치:

grid-column: -2 / -1;  // Spans the last 2 columns

열 줄 고정:

이 기술은 줄 고정을 사용하여 행의 끝점을 사용 가능한 공간으로 확장합니다:

grid-column: auto;
grid-column-end: 100%;

최소 크기 자동 크기 조정:

최소 너비로 자동 크기 조정을 사용하면 행이 지정된 수 이상을 차지하도록 보장됩니다. 열:

grid-column: auto;
min-width: 400px;

예:

모든 열에 걸쳐 탐색 행을 늘리려면:

  

    ...
  
  ...

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.main-nav {
  grid-column: 1 / -1;  // Spans all columns
}

이러한 방법 중 하나를 적용하면 CSS 그리드의 여러 열에 걸쳐 행이나 열을 확장하여 복잡하고 유연한 레이아웃을 만들 수 있습니다.