CSS 그리드 행을 여러 열에 걸쳐 만드는 방법은 무엇입니까?

행을 여러 열로 확장

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

줄 기반 배치:

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

<code class="css">grid-column: 1 / 4;  // Spans columns 1, 2, and 3</code>

명시적 그리드 영역:

점유 셀을 명시적으로 정의하는 그리드 영역 속성을 사용합니다.

<code class="css">grid-area: 1 / 2 / span 3;  // Spans 3 columns from row 1, column 2</code>

음수 값:

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

<code class="css">grid-column: -2 / -1;  // Spans the last 2 columns</code>

열 줄 고정 :

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

<code class="css">grid-column: auto;
grid-column-end: 100%;</code>

최소값으로 자동 크기 조정:

최소 너비로 자동 크기 조정을 수행하면 행이 지정된 열 수 이상을 차지하게 됩니다.

<code class="css">grid-column: auto;
min-width: 400px;</code>

예:

탐색 행을 늘리려면 모든 열에 적용:

<code class="html"><div class="container">
  <div class="main-nav">
    ...
  </div>
  ...
</div></code>

<code class="css">.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

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

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

위 내용은 CSS 그리드 행을 여러 열에 걸쳐 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!