'grid-template-areas'를 사용하면 내 CSS 그리드 레이아웃이 예상대로 작동하지 않는 이유는 무엇입니까?

CSS 그리드의 그리드 영역 배치 문제 해결

CSS 그리드에서 Grid-template-areas 속성은 그리드의 특정 영역을 요소에 할당합니다. 그러나 이 속성으로 작업할 때 레이아웃이 예상대로 표시되지 않는 문제가 발생할 수 있습니다.

일반적인 오류 중 하나는 제공된 문자열에 그리드-템플릿-열에 정의된 것과 동일한 수의 열이 없는 경우입니다. . 이 경우 레이아웃이 올바르게 표시되지 않을 가능성이 높습니다.

다음 예를 들어보겠습니다.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us";
}

이 예에서 Grid-template-areas 속성은 두 개의 행과 하나의 열을 정의합니다. , 그러나 Grid-template-columns 속성은 두 개의 열을 정의합니다. 이러한 불일치로 인해 예기치 않은 동작이 발생합니다.

이 문제를 해결하려면 Grid-template-areas 속성에 Grid-template-columns 속성과 동일한 수의 열이 있어야 합니다. 이 경우 다음과 같이 Grid-template-areas 속성을 수정할 수 있습니다.

grid-template-areas: "logo faq" "about-us about-us";

이렇게 하면 레이아웃이 정의된 열과 올바르게 정렬됩니다.

작업할 때 기억하세요. 그리드-템플릿-영역, 정의된 영역 수는 각각 그리드-템플릿-행 및 그리드-템플릿-열 속성에 지정된 행 및 열 수와 일치해야 합니다.

위 내용은 'grid-template-areas'를 사용하면 내 CSS 그리드 레이아웃이 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!