놓치지 말아야 할 CSS 그리드 레이아웃에 대한 자세한 지식!

이 기사는 CSS 그리드 레이아웃에 대한 몇 가지 지식 포인트를 공유하고 CSS 그리드 레이아웃에 대해 더 자세히 알아볼 수 있도록 안내합니다. 도움이 되기를 바랍니다.

현재 최신 웹 레이아웃에 사용할 수 있는 기능이 많이 있습니다. 아마도 가장 잘 알려진 것은 Flexbox일 것이며 누구나 Flexbox 레이아웃을 쉽게 해결할 수 있다고 생각합니다. Flexbox 레이아웃은 매우 강력하지만 여전히 1차원 레이아웃이지만 일부 2차원 레이아웃 시나리오에서는 여전히 큰 제한이 있습니다. 이는 또한 CSS 그리드가 현대 웹 레이아웃이나 미래의 레이아웃 솔루션에 여전히 필수라는 점을 보여줍니다. 결국 현재까지는 CSS 그리드가 2차원 레이아웃을 지원하는 유일한 기술입니다. 2021년에는 CSS Grid와 관련된 모든 것을 몇 달 동안 검토하고 20개 이상의 기사를 통해 CSS Grid를 설명했습니다. 이 시리즈는 인터넷 전체에서 CSS Grid를 가장 체계적으로 소개한 시리즈라고 할 수 있습니다. 아직 접해보지 않았거나 CSS 그리드에 대해 어느 정도 두려움이 있다면 이 시리즈를 읽어 볼 가치가 있습니다.

CSS 그리드의 중요한 용어

모든 기능 모듈에는 고유한 전문 용어가 있으며 CSS 그리드도 예외는 아니지만 CSS 그리드의 기술 용어는 더 넓은 범위를 포괄합니다. 본 글에서는 그리드 축, 그리드 컨테이너, 그리드 항목, 그리드 라인, 그리드 셀, 그리드 트랙, 그리드 영역, 명시적 그리드, 암시적 그리드, 그리드 간격(그리드 슬롯), 그리드 축, 그리드 컨테이너, 그리드 항목 등 CSS 그리드 관련 용어에 대해 자세히 설명합니다. 하위 그리드 및 중첩 그리드 등

그리드 속성 및 크기

CSS 그리드 레이아웃과 관련된 기술 용어를 어느 정도 이해하고 나면 CSS 그리드에서 사용할 수 있는 속성을 실제로 이해하기 시작할 수 있습니다. 이번 섹션에서는 그리드 컨테이너에 사용할 수 있는 속성과 그리드 컨테이너 및 그리드 항목의 크기를 설정하는 방법을 주로 설명합니다. 이를 위해 우리는 그리드 템플릿 열, 그리드 템플릿 행 및 그리드 템플릿 영역과 같은 속성을 사용하여 명시적인 그리드를 정의할 수 있습니다.

그리드 트랙 크기 설정

CSS 그리드에서는 그리드 템플릿 열과 그리드 템플릿 행을 사용하여 그리드 트랙을 명시적으로 정의할 수 있습니다. 그러나 이 섹션에서는 그리드 트랙 크기를 설정하는 데 사용할 수 있는 단위, 특히 CSS 그리드의 고유 단위 fr에 대해 주로 설명합니다.

고유 치수를 사용하여 그리드 트랙 크기 정의

grid-template-columns 및 Grid-template-rows에서 길이 단위(), 백분율 단위() 외에 탄성 계수 단위(fr)로 그리드 트랙의 크기를 설정하는 것 외에도 일부 키워드(예: none, auto, min-content, max-content, fit-content 및 fit-content())를 사용할 수도 있습니다. ) 그리드 트랙 크기를 설정합니다. 그 중 min-content, max-content, fit-content도 고유 차원을 사용하여 그리드 트랙 크기를 설정한다고 합니다.

그리드에서 사용 가능한 기능

그리드-템플릿-열 및 그리드-템플릿-행 외에도 고정 길이 값, 동적 값 및 일부 키워드를 사용하여 그리드 트랙의 크기를 설정합니다(예: 외부 및 내부 사용) 그리드 트랙 크기를 설정하는 크기). minmax(min, max),peat() 및 CSS 비교 함수(예: min(), max() 및 클램프() 함수)와 같은 CSS 그리드의 일부 기능을 사용하여 그리드 트랙 크기를 설정할 수도 있습니다. even 이 함수들은 서로 중첩될 수도 있습니다.

명시적 그리드 및 암시적 그리드

명시적 그리드는 그리드 템플릿 열, 그리드 템플릿 행 및 그리드 템플릿 영역을 사용하여 명시적으로 정의할 수 있습니다. 또한, 암시적 그리드를 정의하기 위해 그리드 자동 열, 그리드 자동 행 및 그리드 자동 흐름을 사용할 수 있습니다.

그리드 항목 자동 배치

CSS 그리드 레이아웃에서 그리드 항목에 그리드 행, 그리드 열, 그리드 영역과 같은 속성을 사용하면 그리드 항목을 그리드의 지정된 위치에 명확하게 배치할 수 있습니다. 또한 CSS 그리드 레이아웃 사양에는 위치가 명시적으로 할당되지 않은 그리드 항목을 배치하는 방법을 규정하는 또 다른 규칙 세트도 포함되어 있습니다. 즉, 자동 그리드 배치를 설정하려면 Grid-auto-flow를 사용하세요.

그리드 레이아웃의 그리드 선

CSS 그리드 시스템에서 그리드 선은 매우 중요한 개념입니다. 기본적으로 그리드 시스템을 정의할 때마다 숫자로 된 그리드선 이름(행 그리드선 이름, 기둥 그리드선 이름)이 기본적으로 생성됩니다. 또한, Grid-template-columns 및 Grid-template-rows에서 대괄호 [] 안에 그리드 선의 이름을 명시적으로 지정할 수도 있습니다. 앞서 언급했듯이 CSS 그리드 시스템은 명시적 그리드와 암시적 그리드로 구분되며, 명시적 그리드 라인에 위치한 그리드 라인을 명시적 그리드 라인이라고 합니다. 암시적 격자선에 위치한 격자선을 암시적 격자선이라고 합니다. 그리고 그리드 시스템에서는 그리드 항목을 명확하게 배치할 때 그리드 선이 필수입니다. 즉, 그리드 선의 이름은 그리드 항목의 배치에 직접적인 영향을 미칩니다. 이 기사에서는 주로 그리드 선의 이름을 지정하는 방법에 대해 논의하겠습니다. 관심이 있으시면 계속해서 읽어보시기 바랍니다.

그리드 라인은 그리드 레이아웃 시스템에서 매우 중요합니다. 이전 내용에서는 그리드 레이아웃 시스템에서 그리드 라인과 관련된 지식을 자세히 설명하지는 않았지만, 그리드-템플릿-열, 그리드-템플릿-행, 그리드-템플릿-영역, 그리드-템플릿-영역, 그리드-템플릿-영역 등의 속성을 찾는 것은 어렵지 않습니다. auto-columns,grid-auto-rows,grid-auto-flow는 그리드 선을 생성하고, 그리드 항목의 Grid-columns,grid-row,grid-area는 그리드 선을 통해 그리드를 배치하고 균일하게 열 수 있습니다. 레이아웃 시스템을 만들 때 더 많은 가능성을 제공합니다. 이 섹션에서는 CSS 그리드 레이아웃에서 그리드 이름을 지정하는 다양한 방법과 그로부터 발생하는 몇 가지 흥미로운 가능성을 자세히 살펴보겠습니다.

그리드 항목 배치

CSS 그리드에 그리드 항목을 자동으로 배치하는 것 외에도(일반적으로 그리드 자동 행, 그리드 자동 열 및 그리드 자동 흐름 사용) 그리드 항목을 배치할 수도 있습니다. 네트워크에서 그리드 항목은 그리드 행 이름을 설정하기 위해 그리드 행, 그리드 열 및 그리드 영역을 사용하여 명시적으로 배치됩니다.

그리드 항목의 자동 배치 알고리즘

CSS 그리드 레이아웃에서는 지정된 위치에 그리드 항목을 명시적으로 배치하는 다양한 방법이 있습니다. 예:

• 그리드 행 이름을 지정하고 그리드 항목을 배치하려면 그리드 행-시작, 그리드 행-끝, 그리드-열-시작 및 그리드-열-끝을 사용하세요.
• 그리드 행-시작, 그리드-를 사용하세요. row-end, Grid-column-start 및 Grid-column-end Grid-row 및 Grid-column의 약어 속성은 그리드 줄 이름을 지정하고 그리드 항목을 배치합니다
• grid-area를 사용하여 그리드 이름을 지정하거나 그리드를 지정합니다 -template -areas로 정의된 그리드 영역의 이름, 그리드 항목을 배치합니다.
• 그리드를 그리드 행-시작, 그리드-행-끝, 그리드-열-시작, 그리드-열-끝 또는 그리드-행에서 지정합니다. , 그리드-열 행 이름 및 범위를 사용하여 병합된 그리드 셀을 지정합니다. 그리드 항목
• 을 그리드 행 시작, 그리드 행 끝, 그리드 열 시작, 그리드 열 끝(및 해당 속기 속성 그리드 행, 그리드 열) 또는 그리드에 배치하는 조합을 지정합니다. 그리드 항목을 배치할 영역의 그리드-템플릿-행, 그리드-템플릿-열 및 그리드-템플릿-영역으로 정의된 그리드 라인 이름
• 그리드 항목을 배치하려면 명명된 그리드 라인 이름과 범위 키워드를 사용하세요.
• 이름을 지정하세요 그리드-템플릿 영역 또는 그리드-템플릿-행 및 그리드-템플릿-열을 그리드 영역에 생성하고 그리드 항목을 배치합니다

그러나 그리드 레이아웃 시스템에서는 그리드 항목 배치에 고유한 특성이 있습니다. 자신만의 성숙한 알고리즘 세트. 이번 장에서는 CSS 그리드 그리드 항목 배치 알고리즘(자동 배치와 명시적 배치)에 대해 5단계로 나누어 설명합니다.

그리드 항목의 중첩 및 Z축 계층 구조

그리드 항목은 그리드 행, 그리드 열 및 그리드 영역과 같은 속성을 사용하여 그리드 선 이름을 기반으로 그리드 항목 위치를 명시적으로 지정할 수 있습니다. 이렇게 하면 그리드 항목이 서로 겹칠 수 있습니다. 즉, CSS 그리드에서는 다음 방법을 사용하여 그리드 항목을 서로 겹치게 만들 수 있습니다.

• 그리드 선 인덱스 번호 사용
• 이름이 지정된 그리드 선 사용
• 이름이 지정된 그리드 영역 사용
• 그리드 셀 병합(예: )

더 흥미로운 점은 CSS 그리드 항목이 Z-인덱스를 적용하기 위해 명시적으로 위치를 비정적 값으로 설정할 필요가 없다는 것입니다. 즉, 네트워크에서 그리드 항목이 겹칠 때 다음을 수행할 수 있습니다. 그리드 항목의 z축 수준을 제어하려면 그리드 항목에 직접 z-index를 명시적으로 설정하세요.

그리드 레이아웃의 정렬 및 간격

Flexbox 레이아웃의 정렬에 익숙하다면 CSS 그리드의 정렬을 익히기가 쉽습니다. Flexbox와 매우 유사하기 때문에 둘 다 CSS Box Alignment Module Level 3 사양의 기능을 사용합니다. 이 장에서는 그리드 레이아웃의 그리드 항목과 그리드 트랙의 정렬을 자세히 소개합니다. 또한 정렬과 여백의 관계(여백을 사용하여 그리드 항목의 정렬을 설정하는 방법)도 소개합니다.

또한 기사 마지막 부분에서는 간격 속성, 즉 간격을 사용하여 그리드 트랙 사이의 간격(일반적으로 그리드 슬롯의 크기로 알려짐)을 설정하는 방법도 소개합니다.

그리드 항목의 가로 세로 비율

이 장에서는 주로 그리드 항목의 가로 세로 비율, 즉 그리드 애플리케이션에서 CSS의 가로 세로 비율 속성 설정에 대해 설명합니다. 또한 그리드 항목의 종횡비를 구현하기 위해 padding-top 또는 padding-bottom과 CSS 사용자 정의 속성 및 calc() 함수도 도입합니다.

그리드의 쓰기 모드

이 글에서는 주로 CSS 논리 속성 및 CSS 쓰기 모드이 그리드 레이아웃에 미치는 영향에 대해 설명합니다. 예를 들어 그리드 항목의 자동 배치와 쓰기 모드의 관계, 그리드 선을 기준으로 그리드 항목 배치와 쓰기 모드의 관계, 그리드 영역과 쓰기 모드의 관계 등이 있습니다.

중첩 그리드 대 하위 그리드

한동안 하위 그리드의 사용 사례, 구현 방법에 대해 많은 논의가 있었으며 심지어 필요한지 여부에 대한 논쟁도 있었습니다. 하위 그리드와 동일한 문제를 처리하는 두 가지 다른 방법인 중첩 그리드와 디스플레이: 콘텐츠에 대해 많은 논의가 있었습니다. 이 기사에서는 중첩 그리드를 진입점으로 사용하고 중첩 그리드와 하위 그리드에 대해 자세히 설명합니다. 즉, 하위 그리드와 중첩 그리드의 유사점과 차이점은 무엇인지 이해하게 될 것입니다. 또한 서브그리드가 실제로 필요한 매우 효율적인 경우도 있지만 꼭 필요하지는 않지만 더 깨끗한 솔루션으로 이어지는 경우도 있습니다.

subgrid vs display:contents

subgrid CSS 그리드 레이아웃 모듈의 레벨 2 사양에 들어가기 전에 중첩 그리드, 서브 그리드 및 디스플레이: 콘텐츠에 대해 심도있게 논의했으며 마침내 서브 그리드가 더 많은 지원을 받았습니다. 표준의 일부가 되었습니다. 즉, 중첩된 그리드와 디스플레이: 콘텐츠 모두 하위 그리드와 유사한 레이아웃을 얻을 수 있습니다. 이번 장에서는 디스플레이:컨텐츠와 서브그리드의 차이점이 무엇인지 논의해 보겠습니다.

폭포 레이아웃

브라우저는 다중 열 레이아웃, Flexbox 레이아웃, 그리드 레이아웃을 지원하므로 이러한 기능을 사용하여 폭포 레이아웃을 구현할 수 있지만 이러한 기술로 구현된 폭포 레이아웃은 전부 이상이 있을 수 있습니다. 약간의 결함이 있습니다. 그러나 고맙게도 CSS 그리드 레이아웃 모듈 레벨 3은 진정한 폭포 흐름 레이아웃이라고 할 수 있는 W3C 사양에 진정한 폭포 흐름 레이아웃을 통합합니다. 안타깝게도 이 초안 사양을 지원하는 주류 브라우저는 많지 않으며 Firefox와 Firefox Nightly만 있습니다. 이 기능은 아직 프로덕션에서 사용할 준비가 되지 않았지만 사용 후 평가판과 피드백은 이 레이아웃에 대한 요구 사항을 충족하는지 확인하는 데 중요합니다.

그리드 레이아웃을 조정하는 그리드 검사기

이전 내용에서 그리드 레이아웃의 복잡성과 유연성을 찾는 것은 어렵지 않습니다. CSS 그리드가 등장한 이후 웹에서 레이아웃을 디자인하는 방법도 달라졌다는 사실은 모두가 깨달았을 것입니다. 종이에 레이아웃을 스케치하고 레이아웃 디자인이 무엇인지 생각해 볼 수 있습니다. 코드를 입력하기 시작하면 레이아웃이 어떻게 보일지 이미 알고 있습니다. CSS 그리드 레이아웃의 복잡성과 그리드 컨테이너에 정의된 그리드가 보이지 않는다는 사실 때문입니다. 그렇기 때문에 어떻게 하면 그리드를 더 쉽게 사용할 수 있을지, 그리드 레이아웃 관련 버그를 어떻게 디버깅할 것인지 고민해야 합니다. 웹 개발에 익숙한 학생들은 레이아웃이나 CSS 관련 문제를 디버깅할 때 요소에 테두리를 추가하는 것을 좋아한다는 것을 알고 있습니다. 그리드 레이아웃에서는 유사한 방법을 사용하여 그리드 컨테이너 및 그리드 항목에 테두리를 추가하여 빠르게 배치할 수 있지만 그리드 선에 테두리를 추가할 수는 없습니다. 다행히 Chrome, Firefox, Safari 및 Microsoft Edge 브라우저 개발자 도구(DevTools)와 같은 현재 주류 브라우저는 모두 그리드 레이아웃 검사기를 제공합니다. 이러한 도구를 사용하면 그리드를 사용하는 데 신속하게 도움을 주고 그리드를 사용할 때 발생하는 문제를 디버그할 수 있습니다.

그리드 레이아웃 사례 및 기능

CSS 그리드 모듈과 이에 대한 브라우저 지원의 출현은 웹 레이아웃에 전례 없는 가능성을 제공합니다. 더 적은 수의 요소(더 단순한 HTML 구조)로 더 복잡한 디자인을 구축할 수 있습니다. 이는 우리가 항상 매우 강력하다고 생각했던 Flexbox보다 훨씬 더 강력합니다. 그런데 씨에스에스 그리드(Grid)라고 하면 흔히 우리에게 익숙한 정사각형 레이아웃을 떠올리시죠? @Andy Barefoot은 자신의 개인 웹사이트와 Codepen에서 창의적인 반응형 레이아웃 효과를 많이 제공합니다. 이는 웹 레이아웃에 대해 완전히 새로운 느낌을 주며 클래식 웹 디자인(정사각형 레이아웃)과 유사한 느낌을 줍니다. 그는 CSS 그리드 레이아웃을 사용하여 이것을 해라.

그리드 구성을 사용하여 겹치는 레이아웃 만들기

CSS 그리드 레이아웃에서는 그리드 항목 배치를 통해 서로 다른 요소를 서로 위에 배치하고 CSS z-index를 통해 그리드를 제어할 수 있습니다. z축의 그리드 항목 수입니다. 즉, CSS 위치의 절대 위치 지정을 사용하여 구현했던 레이아웃을 이제 CSS Grid를 사용하여 직접 해결할 수 있습니다. 이 경우 CSS Grid를 사용하여 요소 오버레이의 레이아웃 효과를 얻는 방법을 주로 살펴봅니다.

그리드를 사용하여 풀 블리드 레이아웃 구축

풀 블리드(Full-Bleed)는 인쇄 세계에서 풀 블리드로 알려진 개념입니다. 즉, 인쇄 시 용지가 잘리는 부분 바깥쪽 영역인 블리드가 있습니다. 이 때문에 인쇄 디자이너는 디자인 작업에서 블리드를 고려하는 데 익숙합니다. 우리는 안전지대를 설정함으로써 이를 수행합니다. 최근에는 '풀 블리드'라는 개념이 웹 레이아웃에도 적용되고 있습니다. 이는 더 좁은 텍스트 열의 가장자리 전체 이미지와 같이 제한된 너비의 열에서 전체 너비 요소를 사용하는 레이아웃입니다. 커뮤니티에서는 이 레이아웃 효과를 Full-Width 레이아웃이라고 부르는 사람도 있고 Edge-To-Edge 레이아웃이라고 부르는 사람도 있습니다. 솔직히 말해서 웹에서 이러한 레이아웃 효과를 얻는 것은 어렵지 않습니다. 커뮤니티에는 이 레이아웃 효과를 얻을 수 있는 다양한 기술 솔루션이 있습니다. 하지만 오늘은 다른 각도에서 생각해 보겠습니다!

그리드를 사용하여 크로스 레이아웃 만들기

이 사례는 CSS Grid로 만든 또 다른 그리드 레이아웃, 즉 크로스 레이아웃을 소개하는 것입니다. 이 사례는 CSS 그리드의 관련 속성이 실제로 어떻게 사용되는지(웹 레이아웃) 더 잘 이해하는 데 도움이 될 것입니다.

그리드를 사용하여 잡지 및 신문 레이아웃 구축

오랫동안 정사각형 직사각형은 웹 레이아웃에서 사용자에게 UI 효과를 표시하는 데 사용되었으며 이는 많은 웹 개발자의 생각이기도 합니다. . 레이아웃은 직사각형 배열의 제약을 깰 수 없습니다! 하지만 웹 기술의 발전 속도는 놀랍고 매일 새로운 것이 우리 앞에 나타나고 있습니다. 불과 몇 년 만에 웹 레이아웃을 위한 수많은 새로운 기능이 등장했습니다. 즉, 오늘 디자이너가 "자기야, 잡지나 신문과 비슷한 레이아웃을 만들자"라고 말한다면! 당신은 행복하게 OK라고 말할 것입니다. 즉, 현재의 새로운 기능을 사용하면 직사각형 프레임의 한계를 깨고 웹에서 잡지와 같은 레이아웃을 얻을 수 있습니다.

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 놓치지 말아야 할 CSS 그리드 레이아웃에 대한 자세한 지식!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!