전체 웹 사이트 너비에 걸쳐 그리드 탐색을 확장하는 방법

그리드 분석

다음을 지정했음에도 불구하고 탐색(nav)이 웹 사이트의 전체 너비에 걸쳐 확장되지 않는 문제가 발생했습니다. 차지할 열. 문제를 이해하기 위해 사용한 구문을 분석해 보겠습니다.

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

이 표기법은 그리드 열의 시작점과 끝점을 정의하며 다음과 같이 분류됩니다.

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

이 경우 내비게이션(nav)에게 첫 번째 그리드 열 줄부터 두 번째 그리드 열 줄까지 확장하라고 지시합니다. 그러나 불일치가 있습니다.

그리드에는 실제로 두 개가 아닌 세 개의 열 라인이 있습니다.

그리드 라인 계산: 시작 및 끝 라인

In 그리드 시스템에서 열/행 줄 수는 항상 열/행 수에 1을 더한 것과 같습니다. 이 추가 줄은 그리드의 끝을 나타냅니다.

그리드 사양 조정

이 문제를 해결하려면 모든 열에 걸쳐 있도록 그리드 사양을 조정할 수 있습니다.

옵션 1: 끝 열 지정

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

옵션 2: 음수 값 사용

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

음수 값은 끝부터 계산됩니다. 그리드이므로 "-1"은 마지막 열 줄을 나타냅니다.

변경하기

원래 그리드 열 규칙을 위 옵션 중 하나로 바꾸세요.

<code class="css">.mainnav {
  grid-column: 1 / -1;
}</code>

이 변경을 통해 탐색(nav)이 웹사이트 전체 너비에 걸쳐 확장될 수 있습니다.

위 내용은 전체 웹 사이트 너비에 걸쳐 그리드 탐색을 확장하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!