CSS 그리드 레이아웃에서 항목 이동하기 [안내]
사용 CSS 그리드 레이아웃 모듈 더 많은 브라우저가 시작됨에 따라 웹 디자인에서 점점 더 실현 가능 해짐 그것을지지하다. 그리드 셀을 채우는 레이아웃을 만드는 동안, 더 복잡한 것을 달성하기를 원할 때.
예를 들어 약간 움직이다 일부 모눈 항목은 모눈 영역에 고정되어 있습니다. 너는 또한 원할지도 모른다. 그리드 컨테이너 밖으로 이동 (오버플로), 또는 위에 (중첩), 아니면 그냥 ... 주위의 빈 공간으로.
그래서,이 글에서는 어떻게 할 수 있는지 보여 드리겠습니다. 오버플로, 겹침 및 크기 조정 CSS 그리드 레이아웃 모듈을 사용할 때.
CSS 격자 만들기
먼저 간단한 CSS 그리드를 만듭니다. 하나의 행과 세 개의 열.
HTML에서는 그리드 컨테이너가있는 div를 만들고 세 가지 모눈 항목을 포함합니다..
CSS에서 그리드 컨테이너 ~을 가지고있다. 디스플레이 : 그리드; 재산 및 그리드 항목 있다 그리드 영역 그리드 항목 영역의 이름을 식별하는.
또한 우리 더하기 그리드 템플릿 영역 재산 그리드 영역 이름이 사용되는 그리드 컨테이너로 그리드 영역을 그리드 셀에 지정.
모든 항목 한 분수의 크기를 가져라.fr) 그리드 아이템의 봉쇄를 보장하는 컨테이너 너비.
.그리드 컨테이너 디스플레이 : 그리드; grid-template-areas : '왼쪽 가운데 오른쪽'; grid-template-columns : 반복 (3, 1fr); grid-template-rows : 80px; 그리드 간격 : 5px; 너비 : 360px; 배경색 : 자홍색; .grid-left 그리드 영역 : 왼쪽; .grid-center grid-area : center; .grid-right grid-area : right; .grid-container div background-color : lightgreen;
오버플로 그리드 항목
그리드 아이템을 만들 수 있습니다. 그리드 컨테이너를 오버 플로우시킨다. 레이아웃에 필요한 경우. 오버플로 효과를 얻으려면 다른 열 크기를 사용하십시오.:
.그리드 컨테이너 디스플레이 : 그리드; grid-template-areas : '왼쪽 가운데 오른쪽'; grid-template-columns : 반복 (3, 150px); 그리드 간격 : 5px;
그만큼 칼럼 크기와 갭 크기의 합 보다 큽니다. 용기의 폭, 그리드 항목이 컨테이너에서 오버 플로우됩니다..
그리드 항목 겹침
에이 표 항목이 겹칠 수 있음 (완전히 또는 부분적으로 덮음) 다른 그리드 항목 다음과 같은 경우
- 다른 그리드 항목의 셀 (들)을 가로 지르도록 설정됩니다..
- 크기가 증가하여 인접한 그리드 항목과 겹치게됩니다..
- 다른 그리드 항목 위로 옮겼습니다..
나중에 두 번째 및 세 번째 사례에 대해 “크기 조정” 과 “움직이는” 섹션들.
먼저, 그리드 아이템이 처음으로 다른 사람을 가로 지르다.
센터의 그리드 항목에는 왼쪽에 걸쳐, 그래서 두 항목 만 화면에 표시됩니다..
.그리드 센터 그리드 영역 : 센터; 격자 열 : 1 / 3;
그만큼 격자 열 과 그리드 열 속성들 격자 선 지정 그 사이에 열 또는 행이 들어 맞아야합니다..
아래 다이어그램에서 격자 열 : 1/3 CSS 규칙 작동 : 가운데 열 그리드 라인 1과 3 사이의 범위. 결과적으로 중앙 열은 왼쪽 열과 중첩됩니다..
그리드 항목 이동
움직여서, 나는 의미한다. 항목을 살짝 옮긴다.. 항목을 완전히 다른 격자 셀 / 영역으로 재배치하려는 경우 격자 생성 코드를 업데이트하는 것이 좋습니다.
그리드 항목을 이동하는 것은 간단합니다. 다만 사용 여유, 그만큼 변환, 아니면 그 위치 : 상대적; 속성들. 이러한 속성을 사용하여 항목을 이동하는 방법은 아래를 참조하십시오..
중앙 및 오른쪽 모눈 항목은 다음과 같은 방법으로 이동할 수 있습니다 (위 그림 참조).
1. 사용하기 여유
음수 여백은 그리드 항목의 크기를 늘리고 양수 여백은 자르지 않습니다. 두 가지를 모두 사용하여 그리드 항목을 슬 라이트 할 수 있습니다..
.그리드 센터 그리드 영역 : 센터; margin-left : -10px; margin-right : 10px; margin-top : -10px; margin-bottom : 10px; .grid-right grid-area : right; margin-left : 10px; margin-right : -10px; margin-top : -10px; margin-bottom : 10px;
2. 사용하기 변환
그만큼 옮기다() CSS 기능 요소를 x 축과 y 축을 따라 이동합니다.. 그것을 함께 사용하여 변환 속성을 사용하면 모눈 항목의 위치를 변경할 수 있습니다..
.그리드 센터 그리드 영역 : 센터; 변형 : 번역 (-10px, -10px); .grid-right grid-area : right; 변형 : 번역 (10px, -10px);
3. 사용하기 위치
사용 위치 : 상대적; 지정된 규칙 상단, 바닥, 왼쪽, 과 권리 속성은 그리드 항목 주위를 이동하는 데에도 사용할 수 있습니다..
.그리드 센터 그리드 영역 : 센터; 위치 : 상대적; 하단 : 10px; 오른쪽 : 10px; .grid-right grid-area : right; 위치 : 상대적; 하단 : 10px; 왼쪽 : 10px;
그리드 아이템 주문
격자 항목이 화면에 렌더링됩니다. HTML 소스 코드에 나타나는 순서대로.
이전 섹션에서 가운데 항목을 왼쪽으로 이동하면 브라우저가 왼쪽 항목의 맨 위에 배치했습니다. 이것은 HTML에서, 그러나 우리는 주문 그리드 항목 변경 ~을 사용하여 사용 CSS 그리드 레이아웃 모듈에서와 마찬가지로 HTML에서 요소 순서를 변경합니다. 그리드 레이아웃에는 영향을주지 않습니다., 당신은 또한 넣을 수 있습니다. 모눈 항목에 자동 크기 조정 행 또는 열을 사용하는 경우 ( 우리의 샘플 그리드에서 세 개의 모든 열은 한 부분을 취합니다 ( 여기서는 왼쪽 항목의 크기를 변경합니다. ~을 사용하여 여기서는 왼쪽 항목의 크기를 변경합니다. ~을 사용하여 Z- 색인 아니면 그 주문 CSS 속성.
z- 색인 : 1; 규칙, 왼쪽 모눈 항목 더 높은 스태킹 컨텍스트를 가짐.. 그리드 - 왼쪽 그리드 - 영역 : 왼쪽; z- 색인 : 1;
그리드 항목 크기
자동, fr, gr 단위), 크기가 커진 인접 항목에 대한 공간을 만들기 위해 축소됩니다 경우에만 상기 항목 에 의해 크기가되지 않았습니다 변환 또는 음수 여백.fr) 그리드 컨테이너의. 왼쪽 항목이 두 가지 다른 방법으로 크기가 조정 된 후 세 항목이 어떻게 보이는지 살펴보십시오..1. 크기
폭 과 신장폭 과 신장 속성들. 결과적으로 그리드 컨테이너 내부에 머물러있게됩니다..
.그리드 - 왼쪽 그리드 - 영역 : 왼쪽; 너비 : 200px; 높이 : 90px;
2. 크기
변환변환 재산. 결과적으로 컨테이너를 오버플로하고 그리드 간격도 사라집니다..
.그리드 - 왼쪽 그리드 - 영역 : 왼쪽; 변환 : scalex (1.8);
