내 CSS 그리드 영역이 올바르게 배치되지 않는 이유는 무엇입니까?

CSS 그리드: 그리드 영역이 제대로 배치되지 않음

CSS 그리드 시스템에서는 Grid-template-areas 속성을 사용하여 정의할 수 있습니다. 그리드 내의 명명된 영역. 그러나 이 속성을 사용할 때 그리드 영역의 부적절한 레이아웃으로 이어지는 문제가 발생할 수 있습니다.

문제:

grid-template-areas 속성을 사용하여 그리드 영역을 정의할 때 , 예상치 못한 레이아웃이 발생합니다. 다음 코드는 문제를 보여줍니다.

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

이 코드는 첫 번째 행에 "logo"와 "faq"라는 두 영역이 있고 두 번째 행에 "about-us"라는 영역이 있는 2x2 격자를 정의합니다. 열. 그러나 레이아웃이 의도한 구성과 일치하지 않습니다.

해결책:

문제는 Grid-template-areas 속성의 잘못된 열 수에서 발생합니다. 속성의 각 문자열에는 Grid-template-columns에 정의된 것과 동일한 수의 열이 있어야 합니다. 이 경우 속성은 하나의 열만 지정하고 그리드는 두 개의 열로 정의됩니다.

문제를 해결하려면 추가 문자열을 사용하여 "회사 소개" 영역을 두 개의 열로 분할해야 합니다.

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

이 조정을 통해 그리드 영역이 의도한 구성에 맞춰 올바르게 배치됩니다.

위 내용은 내 CSS 그리드 영역이 올바르게 배치되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!