CSS 그리드나 HTML 테이블 없이 여러 행과 열에 걸쳐 Div를 확장하는 방법은 무엇입니까?

CSS 그리드나 HTML 테이블 없이 여러 행과 열에 걸쳐 Div를 확장하는 방법

종종 우리는 여러 요소에 걸쳐 있는 그리드와 같은 레이아웃을 만드는 작업에 직면합니다. 여러 행과 열. 그러나 CSS 그리드나 HTML 테이블을 활용하는 것은 바람직한 접근 방식이 아닐 수도 있습니다. 이 기사에서는 그리드나 테이블이 아닌 솔루션을 제공합니다.

더 큰 요소를 중앙에 배치하는 것을 목표로 5개 요소 행을 포함하는 스니펫을 고려해 보세요. display: inline-block 속성을 사용하면 가로 레이아웃을 얻을 수 있습니다.

<code class="css">#wrapper {
  width: 516px;
}

.block {
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}</code>

그런데 세로 스패닝을 어떻게 처리하나요?

그러나 2017년에 주요 브라우저는 다음과 같은 업데이트를 출시했습니다. CSS 그리드 레이아웃을 완벽하게 지원하여 간단한 솔루션을 제공합니다. display: 그리드 속성을 활용하면 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>

따라서 HTML 테이블이나 CSS 그리드를 사용하지 않고 여러 행과 열에 걸쳐 있는 요소로 그리드 레이아웃을 구현합니다.

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