내 CSS 그리드 영역 레이아웃이 잘못된 이유는 무엇입니까?

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

CSS 그리드로 작업할 때 그리드 영역이 올바르게 배치되었는지 확인하는 것이 중요합니다. 그러나 때로는 상황이 예상대로 진행되지 않을 때도 있습니다. 그리드 영역이 잘못 나타나는 일반적인 문제를 살펴보겠습니다.

잘못된 그리드 영역 레이아웃

다음 코드를 고려하세요.

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

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

이 예에서는 , 우리는 두 개의 열과 두 개의 행으로 구성된 그리드를 만들고 싶습니다. 그러나 "about-us" 영역은 예상대로 렌더링되지 않습니다.

해결책

grid-template-areas 속성의 문자열 값이 다음과 같이 렌더링되어야 하기 때문에 문제가 발생합니다. 그리드 자체와 동일한 수의 열을 가집니다. 이 경우 두 번째 행에는 하나의 열만 있고 첫 번째와 두 번째 영역은 별도의 열에 할당됩니다.

이 문제를 해결하려면 두 번째 행에 다른 열을 추가하면 됩니다.

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

이제 영역이 의도한 대로 올바르게 배치되었습니다. Grid-template-areas 속성을 사용할 때 올바른 그리드 레이아웃을 위해서는 문자열 값이 그리드 구성과 일치하는지 확인하는 것이 필수적입니다.

위 내용은 내 CSS 그리드 영역 레이아웃이 잘못된 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!