그리드 속성이란 무엇입니까?

grid 속성은 grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow, grid-column-gap의 속기 속성입니다. 및 그리드 행 간격 속성.

그리드 구조

격자 속성은 요소를 행렬처럼 표시합니다

 
 
 
 
 
 
 
 

CSS에서

# 컨테이너 {
 디스플레이 : 그리드;
 }

예에서 #container는 격자로 표시되고 자식 요소는 격자 셀 또는 항목으로 표시됩니다

브라우저 호환성

IE, Edge, Firefox는 CSS 그리드 속성 을 지원한다는 것은 매우 흥분된 일입니다. 대부분의 브라우저에는 개발자 도구에 아름다운 그리드 뷰 UI가 있습니다.

그리드 라인

그리드 선은 가로 및 세로 선으로 배치에 사용됩니다. 포지셔닝 인덱스는 정수 (음과 양의 정수) 일 수 있습니다.

속성 → 그리드 열 시작, 그리드 열 끝, 그리드 행 끝, 그리드 행 끝.

샘플 코드 :

#grid> div : nth-child (2) {
 그리드 열 시작 : 2;
 그리드-열-엔드 : 3;
 그리드 행 시작 : 2;
 그리드 행 끝 : 3;
}

요소 2는 2 개의 수평선에서 두 번째 세로선에서 시작하고 요소는 3 개의 세로선과 3 개의 세로선에서 끝납니다.

그리드 라인

그리드 셀

그리드 셀은 인접한 두 개의 수직 그리드 선과 인접한 두 개의 수평 그리드 선 사이의 공간입니다.

그리드 셀

그리드 트랙

그리드 트랙은 인접한 두 그리드 선 사이의 공간입니다. 즉 행, 열.

그리드 트랙

그리드 영역 및 그리드 갭

격자 영역은 하나 이상의 셀 그룹입니다.

그리드 갭은 행과 열 사이의 공간입니다. grid-row-gap 및 grid-column-gap의 속기 속성입니다.

그리드 행 및 그리드 열

grid-row는 grid-row-start 및 grid-row-end의 속기 속성입니다.

grid-column은 grid-column-start 및 grid-column-end의 속기 속성입니다.

그리드 행

grid-row-start → 행에서 그리드 항목의 시작 위치를 지정합니다

예 : grid-row-start : 2 → 요소가 두 번째 세로선에서 시작합니다

그리드 행 끝 → 행에서 그리드 항목의 끝 위치를 지정합니다.

예 : grid-row-end : 3 → 요소가 두 번째 세로선에서 끝남

그리드 자동 흐름

자동 배치 알고리즘의 작동 방식을 제어합니다. 기본적으로 값은 행입니다 (항목은 행 단위로 배치됨)

그리드 자동 흐름 : 행;
그리드 자동 흐름 : 열;
그리드 자동 흐름 열 및 그리드 자동 흐름 행

grid-auto-flow : row dense →“dense”패킹 알고리즘을 사용합니다. 그리드의 여유 공간을 행 단위로 채 웁니다.

grid-auto-flow : column dense → "밀집된"패킹 알고리즘을 사용합니다. 그리드 단위의 빈 공간을 열 단위로 채 웁니다.

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

명시 적 그리드는 그리드 템플릿 행, 그리드 템플릿 열을 사용하여 사용자가 만든 그리드입니다.

그리드-템플릿-열 : repeat (3, 100px);
그리드 템플릿 행 : 100px 100px;

암시 적 그리드는 브라우저에 의해 생성됩니다. 암시 적 그리드의 크기는 grid-auto-columns 및 grid-auto-rows 속성을 사용하여 수정할 수 있습니다.

그리드 템플릿 열 : 반복 (3, 100px);
그리드 자동 행 : 100px;

그리드 순서 :

템플릿 영역 속성으로 요소를 주문할 수 있습니다.

미디어 쿼리에서 템플릿 영역을 변경하고 새로운 그리드 구조를 표시 할 수 있습니다.

자세한 내용은 코드 펜을 확인하십시오.

그리드의 경우 대부분 부트 스트랩 그리드 시스템을 사용합니다. 부트 스트랩은 모든 버전에서 일부 클래스 이름을 변경할 수 있지만 (Bang Not Like Angular ) 따라서 어떤 버전의 클래스 이름이 인지 기억해야합니다.

CSS 그리드 속성을 사용하면 IE 에서도 요소를 그리드보기로 쉽게 표시 할 수 있습니다.

읽어 주셔서 감사합니다! 당신이 그것을 좋아한다면, 을 박수하고 게시물을 공유하여 지원하십시오. 아래에 의견을 남겨주세요.