CSS 그리드 레이아웃은 2 차원 그리드 기반 레이아웃을 만드는 강력한 메커니즘을 제공합니다. 1 차원 레이아웃에서 탁월한 Flexbox와 달리 그리드를 사용하면 행과 열을 동시에 제어 할 수 있습니다. 이것은 grid-template-columns 및 grid-template-rows 속성을 사용하여 달성됩니다. grid-template-columns 그리드의 열을 정의하고, 폭을 명시 적으로 (예 : 100px 200px auto ) 또는 암시 적으로 (예 : repeat(3, 1fr) 세 개의 동일 너비 열을 생성하는 내재를 지정합니다. 마찬가지로, grid-template-rows 행을 정의합니다.
grid-template-areas 속성을 사용하여 그리드 내에서 명명 된 영역을 정의하여 레이아웃을 시각적으로 쉽게 매핑 할 수 있습니다. 이 속성은 각 항목이 그리드 영역을 나타내며 이름이 할당되는 그리드 템플릿 리터럴을 사용합니다. 그런 다음 grid-area 속성을 사용하여 이러한 영역에 항목을 배치합니다. 예를 들어:
<code class="css">.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 150px auto; grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }</code>이렇게하면 헤더, 사이드 바, 메인 컨텐츠 영역 및 바닥 글이있는 3 열 레이아웃이 생성되며 이름이 지정된 그리드 영역을 사용하여 명확하게 정의됩니다. 이 접근법은 복잡한 레이아웃에 대해서도 읽기 쉽고 유지 관리 가능합니다. 또한 레이아웃에 대한 세밀한 제어를 위해 명시적이고 암시적인 그리드 정의를 결합 할 수 있습니다.
CSS 그리드는 다른 레이아웃 방법, 특히 복잡한 그리드 구조에 대해 몇 가지 주요 이점을 제공합니다.
grid-template-rows 및 grid-template-columns 사용하여 행과 열을 명시 적으로 정의 할 수 있습니다. 이것은 명확하고 예측 가능한 레이아웃 구조를 제공하며, 특히 크고 복잡한 그리드에 유리합니다.gap 속성은 그리드 품목 사이의 거터 생성을 단순화합니다.grid-template-areas 과 같은 기능과 결합 된 그리드의 선언적 특성으로 인해 중첩 된 플로트 또는 인라인 블록에 의존하는 접근 방식에 비해 복잡한 레이아웃을 쉽게 이해하고 유지할 수 있습니다.CSS 그리드로 반응 형 디자인을 만드는 것은 간단합니다. 그리드 레이아웃을 다양한 화면 크기로 조정하기 위해 몇 가지 기술을 사용할 수 있습니다.
grid-template-columns , grid-template-rows 또는 grid-template-areas 같은 속성을 수정하여 다양한 화면 크기에 대한 다른 레이아웃을 만듭니다.fr 유닛 : fr (Fractional Units)을 사용하여 사용 가능한 공간에 비례 적으로 조정하는 유연한 열과 행 너비를 만듭니다. 이를 통해 그리드는 다양한 화면 크기에 우아하게 적응할 수 있습니다.min-content and max-content : 이 값은 그리드 트랙의 최소 및 최대 크기를 설정하는 방법을 제공하여 콘텐츠가 다른 중단 점에서 컨텐츠가 넘치거나 너무 작아지지 않도록합니다.grid-auto-flow column 또는 row 과 함께 사용하여 그리드가 사용 가능한 공간에 따라 열 또는 행의 수를 자동으로 조정할 수 있도록 할 수 있습니다. grid-auto-columns 및 grid-auto-rows 사용하여 기본 트랙 크기를 설정할 수 있습니다.dense grid-auto-flow 사용하면 품목 배치를 최적화하고 갭을 채우고 그리드가 다른 화면 크기에 적응할 때 과도한 공백을 방지 할 수 있습니다.예, CSS 그리드는 복잡한 중첩 그리드 구조를 효과적으로 관리합니다. 다른 그리드 내에 그리드를 포함시켜 계층 적 레이아웃을 만들 수 있습니다. 이를 통해 정교한 다단계 디자인을 구축 할 수 있습니다.
예를 들어, 전체 페이지 레이아웃을 정의하는 기본 그리드가있을 수 있으며, 개별 섹션에는 자체 중첩 그리드가 포함되어있어 콘텐츠 배열에 대한 세분화 된 제어를 위해 더욱 제어됩니다. 이 접근법은 더 크고 더 복잡한 레이아웃에 쉽게 통합 될 수있는 재사용 가능한 그리드 구성 요소를 만들 수 있기 때문에 모듈성 및 재사용 성을 허용합니다. 명명 된 그리드 영역과 중첩 그리드의 조합은 가장 고급 웹 디자인조차 관리 할 수있는 강력하고 체계적인 방법을 제공합니다. 적절한 선택기를 사용하여 중첩 그리드 간의 관계를 명확하게 정의하고 유지 관리를 위해 지나치게 복잡한 중첩을 피하십시오.
위 내용은 CSS 그리드 레이아웃을 사용하여 2 차원 그리드 기반 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
