CSS 그리드를 사용하여 행과 열을 확장하는 방법은 무엇입니까?

그리드의 교차 행, 교차 열 Div

그리드에서 div를 수직으로 확장하는 문제를 바탕으로 이제 다음을 살펴보겠습니다. 더 복잡한 과제: 행과 열을 동시에 확장하는 것입니다. 5개의 요소로 구성된 행에서 더 큰 요소를 어떻게 전략적으로 중앙에 배치할 수 있습니까?

비이상적인 접근 방식

요소를 옆으로 띄우는 것은 본질적인 결과입니다. float 속성의 동작. 또한 HTML 테이블이나 CSS 그리드 레이아웃 모두 여기서 실행 가능한 솔루션이 아닙니다.

브라우저 호환성

CSS 그리드는 원활한 솔루션을 제공하지만 역사적으로 브라우저 지원은 제한적이었습니다. 그러나 최근 주요 브라우저의 업데이트로 인해 그리드 레이아웃이 완전히 사용 가능해졌습니다.

CSS 그리드 솔루션

그리드 레이아웃은 우아한 솔루션을 제공합니다. HTML, 중첩된 컨테이너를 변경하거나 고정 높이를 설정하지 않고:

<code class="css">#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 90px);
  grid-auto-rows: 50px;
  grid-gap: 10px;
  width: 516px;
}</code>

특정 행과 열을 확장하려면:

<code class="css">.tall {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}

.wide {
  grid-row: 2 / 4;
  grid-column: 3 / 5;
}</code>

시작 및 끝 행과 열을 정의하여 다음을 수행할 수 있습니다. 그리드 내에서 div의 크기와 위치를 정밀하게 제어하여 원하는 레이아웃을 얻을 수 있습니다.

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