CSS 그리드 레이아웃 모듈 소개
한때 였어. 테이블, 그때 여백과 수레, 그때 플렉스 박스 그리고 지금 그리드: CSS는 항상 새롭고 더 나은 방법으로 코딩 웹 레이아웃. 그만큼 CSS 그리드 레이아웃 모델 레이아웃을 생성하고 업데이트 할 수 있습니다. 두 축을 따라: 수평 및 수직, 너비와 높이 모두에 영향을 미침 요소들.
격자 레이아웃은 마크 업의 요소 위치에 의존하지 않으므로 요소의 배치를 섞는다. 레이아웃을 변경하지 않고 마크 업할 수 있습니다. 그리드 모델에서 그리드 컨테이너 요소는 그리드 열과 행으로 나누어진다. (집합 적으로 그리드 트랙)에 의해 격자 선. 이제 어떻게해야할까요? 샘플 표 만들기.
브라우저 지원
이 글을 쓰는 시점에서 CSS 그리드 모듈은 최신 IE 브라우저와 Edge에서만 지원됩니다. CSS 그리드 실험 단계에서 다른 주요 브라우저에서 수동으로 지원 활성화:
- Firefox : Shift + F2를 누릅니다., 다음 명령을 입력하십시오. 브라우저 하단에 표시된 GCLI 입력 막대에
pref set layout.css.grid.enabled true. - 크롬: 찾아보기
chrome : // 플래그URL 및 사용실험적 웹 플랫폼 기능.
모든 주요 브라우저 지원은 2017 년 중반 / 중반에 와서.
샘플 그리드
에 요소를 그리드 컨테이너로 변환 당신이 사용할 수있는 이 세 가지 중 하나 디스플레이 속성들:
디스플레이 : 그리드;- 요소는 블록 그리드 컨테이너로 변환디스플레이 : 인라인 그리드;- 요소는 인라인 그리드 컨테이너로 변환표시 : subgrid;- 요소가 모눈 항목 인 경우 서브 그리드로 변환 그리드 템플릿과 그리드 갭 속성을 무시합니다.
테이블이 여러 테이블 셀로 구성되어있는 것처럼 그리드는 여러 그리드 셀로 구성된. 표 항목은 다음과 같습니다. 그리드 셀 집합에 할당 총칭하여 그리드 영역.
우리는 5 개의 섹션이있는 그리드 (그리드 영역): 위쪽, 아래쪽, 왼쪽, 오른쪽 및 가운데. HTML은 다음과 같이 구성됩니다. 컨테이너 div 안에 5 개의 div가 있습니다..
상단왼쪽센터권리바닥
CSS에서 그리드 템플릿 영역 재산 다른 격자 영역을 가진 격자를 정의합니다.. 그 가치 있음, 문자열은 그리드 행을 나타냅니다. 과 문자열 내의 모든 유효한 이름은 열을 나타냅니다.. 에 빈 그리드 셀을 만든다. 당신은 도트 (.) 캐릭터 행 문자열 내에서.
그만큼 그리드 영역 이름 에 의해 참조되어야한다. 그리드 영역 개별 그리드 항목의 속성.
.그리드 컨테이너 width : 500px; 높이 : 500px; 디스플레이 : 그리드; grid-template-areas : "top top top" "left center right" "bottom bottom bottom"; .grid-top grid-area : top; .grid-bottom grid-area : bottom; .grid-left 그리드 영역 : 왼쪽; .grid-right grid-area : right; .grid-center grid-area : center;
이 코드는 3 개의 행과 열이있는 격자. 그만큼 상단 항목이있는 영역을 차지합니다. 첫 번째 행에 세 개의 열 그리고 바닥 항목 길이 초과 마지막 행의 3 열. 각각의 왼쪽, 센터 과 권리 항목 소요 중간 열의 한 열.
이제 우리는 크기 지정 이 행과 열에. 그만큼 그리드 - 템플리트 - 컬럼 과 격자 - 템플릿 - 행 속성들 그리드 트랙의 크기를 정의한다. (행 또는 열).
.그리드 컨테이너 width : 500px; 높이 : 500px; 디스플레이 : 그리드; grid-template-areas : "top top top" "left center right" "bottom bottom bottom"; grid-template-columns : 100px 자동 100px; grid-template-rows : 50px 자동 150px;
다음은 CSS 그리드의 모양입니다 (몇 가지 추가 스타일 사용).
그리드 항목 사이의 간격
추가 할 수 있습니다. 열과 행 사이의 공백 ~을 사용하여 그리드 - 칼럼 - 갭 과 격자 줄 간격, 또는 그들의 수기 속성 그리드 - 갭.
.그리드 컨테이너 width : 500px; 높이 : 500px; 디스플레이 : 그리드; grid-template-areas : "top top top" "left center right" "bottom bottom bottom"; grid-template-columns : 100px 자동 100px; grid-template-rows : 50px 자동 150px; 그리드 간격 : 5px 5px;
아래에서 볼 수 있습니다. 그리드 - 갭 실제로 그리드 항목 사이에 간격이 추가되었습니다..
그리드 내용 및 항목 정렬
그만큼 정당화 - 내용 표 컨테이너의 속성 (.격자 컨테이너)는 그리드의 내용을 정렬합니다. 인라인 축 (가로축) 그리고 재산 정렬 콘텐츠, 그리드의 내용을 정렬한다. 블록 축 (세로축). 두 속성 이 값들 중 하나를 가질 수있다.: 스타트, 종료, 센터, ~ 사이의, 공백 과 공간 균일하게.
해당되는 경우 트랙 (행 또는 열) 크기 내용에 맞게 축소 정렬 할 때. 그리드 내용의 스크린 샷보기 서로 다른 값으로 정렬 이하.
justify-content : 시작;
justify-content : 끝;
justify-content : 센터;
justify-content : 스페이스 사이;
justify-content : 공백 주위;
justify-content : 공백 - 균등하게;
align-content : 시작;
align-content : 끝;
align-content : center;
align-content : 스페이스 사이;
align-content : 공백;
align-content : 공간 균일하게;
둘 다 정당화 - 내용 과 정렬 콘텐츠 속성들 격자 내에서 전체 내용 정렬.
에 그리드 영역 내에서 개별 항목 정렬, 사용 다른 한 쌍의 정렬 특성: justify-items 과 정렬 항목. 둘 다 다음 값 중 하나를 가질 수 있습니다. 스타트, 종료, 센터, 기준선 (영역의 기본 격자 선을 따라 항목 정렬) 뻗기 (항목이 전체 영역을 채 웁니다).
