CSS 그리드의 모든 열에 걸쳐 행을 늘리는 방법은 무엇입니까?

CSS 그리드의 모든 열에 걸쳐 행 늘이기: 범위 조정

CSS 그리드의 모든 열에 걸쳐 탐색 행을 확장할 때, 적절한 열 줄을 지정했는지 확인하세요. 처음에는 다음과 같이 정의했습니다.

<code class="css">grid-column: 1 / 2;</code>

이것은 그리드 열의 1행에서 2행까지 확장되어 하나의 열만 포함하는 행을 정의합니다.

해결책 1: 마지막 줄

행을 모든 열에 걸쳐 늘리려면 Grid-column 속성을 조정하여 마지막 줄까지 확장할 수 있습니다.

<code class="css">grid-column: 1 / 3;</code>

이는 행이 첫 번째 열 줄에서 시작하고 세 번째(마지막) 열 줄에서 끝나야 합니다.

해결책 2: 음수 값 사용

또는 음수 값을 사용하여 다음을 수행할 수 있습니다. 그리드 끝에서 참조:

<code class="css">grid-column: 1 / -1;</code>

여기서 -1은 마지막 열 행을 나타내며 행이 모든 열에 걸쳐 효과적으로 표시되도록 합니다.

조정된 코드:

<code class="css">body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 50px auto;
}

.mainnav {
  grid-column: 1 / -1;    /* Adjusted to span all columns */
  grid-row: 1 / 2;        /* Adjustment for explicit grid */
  background-color: #5eccc0;
}

...</code>

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