모든 열에 걸쳐 CSS 그리드 행을 늘리는 방법은 무엇입니까?

CSS 그리드의 모든 열에 걸쳐 행을 늘리는 방법

CSS 그리드는 개발자에게 복잡한 레이아웃을 생성할 수 있는 유연하고 효율적인 방법을 제공하는 강력한 레이아웃 시스템입니다. . 개발자가 CSS 그리드로 작업할 때 갖는 가장 일반적인 질문 중 하나는 사용 가능한 모든 열이나 행에 걸쳐 행이나 열을 늘리는 방법입니다.

이 문서에서는 행을 만드는 두 가지 방법에 대해 설명합니다. CSS 그리드 레이아웃의 모든 열에 걸쳐 확장합니다.

방법 1: 그리드 열 사용: 1 / -1

첫 번째 방법은 그리드 열 사용: 1 / -1. 이 구문은 브라우저에 첫 번째 열(1)에서 요소를 시작하고 마지막 열(-1)에서 끝나도록 지시합니다.

다음은 이 방법을 사용하는 방법의 예입니다.

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

이렇게 하면 .row 요소가 그리드의 모든 열에 걸쳐 늘어납니다.

방법 2: 그리드 템플릿 열 사용: 자동

두 번째 방법은 Grid-template-columns: auto를 사용하는 것입니다. 이 구문은 콘텐츠에 따라 열에 사용 가능한 공간을 자동으로 배포하도록 브라우저에 지시합니다.

다음은 이 방법을 사용하는 방법의 예입니다.

<code class="css">.container {
    display: grid;
    grid-template-columns: auto;
}

.row {
    grid-column: 1;
}</code>

이렇게 하면 .row가 발생합니다. Grid-template-columns 속성에 단 하나의 열만 정의되어 있기 때문에 요소는 .container 요소의 전체 너비에 걸쳐 늘어납니다.

이 두 가지 방법을 모두 사용하여 행을 모든 열에 걸쳐 늘릴 수 있습니다. CSS 그리드에서. 선택하는 방법은 특정 요구 사항과 선호도에 따라 달라집니다.

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