CSS3 그리드 기초: 그리드 배치란 무엇입니까?

우리의 웹 콘텐츠에서는 여러 개의 콘텐츠 블록으로 나눌 수 있는데, 이러한 콘텐츠 블록은 모두 해당 영역을 차지하며 가상 그리드로 상상할 수 있습니다. 지금까지 한 템플릿에서 서로 다른 구조 태그를 사용하여 여러 부동 소수점 및 수동 계산으로 레이아웃을 구현했습니다. 이것은 웹 프런트 엔드 직원에게 고통스러운 일이다. 그리드 레이아웃은 이러한 곤경에서 벗어나는 데 도움이 되며, 레이아웃 방법은 매우 간단하고 명료합니다.

그리드 레이아웃은 테이블 레이아웃을 사용하는 것과 다르지 않은 구조를 만드는 방법을 제공합니다. 그러나 HTML 대신 CSS 로 구현되며 미디어 쿼리에 의존하여 다양한 컨텍스트에 따라 레이아웃을 정의할 수 있습니다. 이것은 반응식 디자인을 좋아하는 학생들에게 절대적으로 좋은 소식이다. HTML 구조에 대해 걱정할 필요가 없기 때문에 레이아웃에 영향을 미칩니다.

그리드 레이아웃은 또한 현재 레이아웃에 존재하는 문서 흐름 제한에서 벗어날 수 있습니다. 즉, 구조는 설계도에 따라 위에서 아래로 배열할 필요가 없습니다. 즉, 페이지 요소의 위치를 자유롭게 변경할 수 있습니다. 이렇게 하면 HTML 구조가 설계에 응답하는 것에 대해 걱정할 필요 없이 여러 중단점 위치에서 가장 필요한 레이아웃을 구현하는 데 가장 적합합니다.

CSS 격자 레이아웃이란 무엇입니까?

CSS 격자 레이아웃은 CSS 가 레이아웃에 추가하는 새로운 모듈입니다. 그리드 배치 특성은 주로 웹 응용프로그램 개발자를 위한 것입니다. 이 모듈은 많은 다른 레이아웃을 구현할 수 있습니다. 네트워크 레이아웃은 응용 프로그램을 여러 공간으로 분할하거나 크기, 위치 및 계층을 정의할 수 있습니다.

표와 마찬가지로 격자 레이아웃을 통해 웹 디자이너는 요소에 따라 열이나 행을 정렬할 수 있지만 표와 달리 격자 레이아웃에는 내용 구조가 없으므로 다양한 레이아웃이 표와 같을 수 없습니다. 예를 들어 그리드 레이아웃의 하위 요소는 유사한 요소를 겹치고 배치할 수 있도록 자체적으로 배치할 수 있습니다.

또한 컨텐츠 구조가 없는 그리드 레이아웃은 유체 및 순서 조정과 같은 기술을 사용하여 레이아웃을 관리하거나 변경하는 데 도움이 됩니다. CSS 의 미디어 쿼리 속성과 함께 그리드 레이아웃 컨테이너와 해당 하위 요소를 제어할 수 있으며, 페이지 레이아웃을 사용하여 문서 구조의 필수 내용을 변경하지 않고 다양한 장치와 사용 가능한 공간에 따라 요소의 표시 스타일과 위치를 조정할 수 있습니다.

브라우저 호환성

일반적으로 IE 10+ 에서만 지원되며 일부 속성만 지원됩니다. 아마도 많은 학우들이 이런 호환성을 보면 멈추거나 두 가지 목소리를 가지고 떠날 수 있을 것이다. 그러나 우리의 연구는 무방비 상태이므로 각 브라우저에 설치하면 효과를 테스트할 수 있다. 다음에는 브라우저에서 이 기능을 켜는 방법에 대해 설명하겠습니다.

그리드 대? Flexbox

Www-list 의 메일에서, 우리는 종종 Pk 현상을 볼 수 있다: 그리드에 대해 말하자면, Flexbox 에 대해 이야기한다. 두 브라우저가 두 모듈을 모두 지원한다고 가정하면 grid 또는 flexbox 를 선택하여 페이지를 레이아웃하시겠습니까? 사실, 둘 다 알면 쉽게 선택할 수 있습니다. Flexbox 는 1 차원 레이아웃으로, 컨텐츠 블록만 한 줄에 놓을 수 있습니다. 그리고 그리드는 2d 배치입니다. 앞서 언급했듯이 설계 요구 사항에 따라 컨텐츠 블록을 어느 곳에나 배치할 수 있습니다. 말할 필요도 없이, 너는 어느 것이 너의 레이아웃에 더 적합한지 알아야 한다.

메쉬 용어

CSS 격자 레이아웃을 사용하려면 새로운 용어와 격자가 제공하는 일부 CSS 속성 및 값을 이해해야 합니다. 이 섹션에서는 그리드 배치의 몇 가지 개념과 용어에 대해 간략하게 설명합니다.

그리드 선 (그리드 선)

그리드 선은 그리드를 구성하며 그리드의 수평 및 수직 분할선입니다. 행 또는 열의 양쪽에 그리드 선이 있습니다. 그 번호 또는 정의된 그리드 선 이름을 참조할 수 있습니다.

위 그림에서 강조 표시된 빨간색 선은 두 번째 열의 그리드 선 (선 2) 입니다.

그리드 트랙

메쉬 트랙은 테이블의 행이나 열처럼 인접한 두 메쉬 선 사이의 공간입니다. 그리드에서 그리드 열과 그리드 행으로 나뉩니다. 각 메시 트랙은 폭 또는 높이를 제어하는 크기를 설정할 수 있습니다.

그림에서 강조 표시된 것은 line2 와 line3 으로 구성된 메시 트랙입니다.

그리드 셀 (그리드 셀)

그리드 셀은 네 개의 그리드 선 사이의 공간입니다. 따라서 표의 셀처럼 가장 작은 단위입니다.

그림에서 강조 표시된 셀은 line2 와 line3, list line2 와 line3 으로 구성됩니다.

메쉬 영역 (메쉬 영역)

그리드 영역은 네 개의 그리드 선으로 구성된 공간이므로 하나 이상의 셀을 포함할 수 있습니다. 테이블에서 병합된 셀 뒤의 영역에 해당합니다.

그림에서 강조 표시된 그리드 영역은 행 라인 line 1 및 line3 과 열 라인 line2 및 line4 사이의 영역이며 주로 네 개의 그리드 셀로 구성됩니다.

메시 컨테이너 (메시 컨테이너)

Display 속성을 사용하여 요소의 속성 값 grid 또는 inline-grid 를 명시적으로 설정하면 해당 요소는 자동으로 격자 컨테이너가 됩니다. 이는 flexbox 와 유사합니다. 요소 설정을 display:flex 로 설정하면 요소가 자동으로 플렉스 모델이 됩니다.

격자 컨테이너는 블록 컨테이너가 아니므로 격자 레이아웃의 일부 속성은 유효하지 않습니다.

그리드 컨테이너에 적용하면 다중 열 레이아웃 모듈의 모든 column-* 속성이 유효하지 않습니다.

그리드 항목 (그리드 셀) 에서 float 및 clear 를 사용하면 효과가 없습니다.

그리드 셀에 사용할 때는 수직 정렬이 적용되지 않습니다.

:: first-line 및:: first-letter 와 같은 의사 요소는 메시 컨테이너에 적용할 수 없습니다.

그리드 셀 순서 (순서)

그리드 셀의 순서는 Flexbox 모듈과 동일하며 그리드의 개별 상위 셀은 order 속성을 통해 순차적으로 재정렬됩니다.