CSS 그리드 레이아웃 Fr 유닛 가이드
그만큼 CSS 그리드 레이아웃 모듈 함께 배송되었습니다. 새로운 CSS 단위 그 fr 단위. 될 수있는 것처럼 간단합니다., fr 는 단어의 약어 “분수”. 새로운 유닛을 사용하면 그리드를 비례하는 열이나 행으로 신속하게 슬라이스 할 수 있습니다. 결과적으로, 완벽하게 반응하고 유연한 그리드 거의 산들 바람이된다..
분수 단위가 Grid Layout 모듈과 함께 도입되었으므로 모든 브라우저에서 사용할 수 있습니다. CSS 그리드 지원. 이전 브라우저를 지원하려는 경우 여기를 클릭하십시오. CSS 그리드 폴리 폴리 이 기능을 사용하면 fr 단위뿐만 아니라 다른 그리드 기능.
기본 사용법
먼저, 기본 그리드 분수 단위를 사용합니다. 아래의 레이아웃은 공간을 3 개의 등 너비 열 과 2 개의 동일한 높이의 행.
소속 HTML은 다음과 같습니다. 여섯 명 와 함께 표시 .상자 수업, 내부 .싸개 div.
1.2.삼.4.5.6.
Grid Layout 모듈을 사용하려면 디스플레이 : 그리드; CSS 속성을 래퍼에 추가합니다. 그만큼 그리드 - 템플리트 - 컬럼 속성은 fr 가치로서 단위; 그만큼 3 개의 열의 비율은 1 : 1 : 1이다..
그리드 행 (격자 - 템플릿 - 행 재산), 나는 사용하지 않았다 fr 단위, 래퍼 경우에만 의미가 있기 때문에 고정 된 높이를 갖는다.. 그렇지 않으면 일부 장치에서 이상한 결과가 나올 수 있습니다. fr 단위 비율을 유지한다. (그리고 이것은 거대하다).
그만큼 그리드 - 갭 재산 10px 격자 추가 상자 사이에. 간격을 원하지 않으면이 속성을 제거하십시오..
.래퍼 디스플레이 : 그리드; grid-template-columns : 1fr 1fr 1fr; grid-template-rows : 200px 200px; 그리드 간격 : 10px; .box color : white; 텍스트 정렬 : 가운데; 글꼴 크기 : 30px; 패딩 : 25px;
위의 CSS에는 배경색과 같은 기본 스타일이 포함되어 있지 않습니다. 너는 할 수있다. 기사 끝 부분의 데모에서 전체 코드 찾기.
비율 변경
물론 1 : 1 : 1을 사용할 수는 없지만 원하는 모든 비율. 아래, 나는 1 : 2 : 1 분획 그 공간을 3 개의 기둥 중간 열은 두 배 폭 다른 두 사람처럼.
나는 또한 그리드 - 갭 레이아웃 변경 방법을 볼 수 있습니다. 기본적으로 브라우저 뷰포트 너비에서 그리드 갭을 공제합니다. (이 예제에서 격자 간격은 최대 80px까지 추가됩니다). 나머지 부분을 조각 낸다. 주어진 분율에 따라.
.래퍼 디스플레이 : 그리드; grid-template-columns : 1fr 2fr 1fr; grid-template-rows : 200px 200px; 그리드 간격 : 40px;
콤바인 fr 다른 CSS 단위로
너는 할 수있다. 콤바인 그만큼 fr 단위 다른 CSS 단위 게다가. 예를 들어 아래 예에서 60 % 1fr 2fr 내 그리드 비율.
그럼, 어떻게 작동합니까? 그만큼 브라우저가 뷰포트 너비의 60 %를 지정합니다. 첫 번째 열에. 그런 다음 나머지 공간을 1 : 2로 나눕니다..
같은 것 또한 다음과 같이 쓸 수있다. 60 % 13.33333 % 26.66667 %. 그러나 솔직히, 왜 그 포맷을 사용하고 싶은가? 분수 단위의 큰 이점은 코드 가독성 향상. 게다가, 그것은 완전히 정확한, 백분율 형식은 여전히 99.9999 %.
.래퍼 디스플레이 : 그리드; 그리드 템플릿 - 컬럼 : 60 % 1fr 2fr; grid-template-rows : 200px 200px; 그리드 간격 : 10px;
백분율을 제외하고, 다른 CSS 단위를 사용할 수도 있습니다. 분수 단위와 함께 태평양 표준시, 픽셀, 여자 이름, 과 rem.
공백 추가 fr
디자인을 복잡하게 만들고 싶지 않은 경우 공백 추가 그리드에? 분수 단위에는 또한이를위한 쉬운 솔루션이 있습니다..
보시다시피,이 그리드 빈 열이있다. 6 개의 상자는 모두 유지됩니다. 이 레이아웃을 위해, 우리는 공간을 슬라이스 할 필요가 있습니다. 4 개의 기둥으로 3 대신에. 그래서 우리는 1fr 1fr 1fr 1fr 가치 그리드 - 템플리트 - 컬럼 재산.
빈 열을 그리드 템플릿 영역 속성을 사용하여 점 표기법. 기본적으로이 속성을 사용하면 참조 된 그리드 영역. 그리드 영역의 이름을 그리드 영역 당신이 사용해야하는 속성 각 영역에 대해 개별적으로.
.래퍼 디스플레이 : 그리드; grid-template-columns : 1fr 1fr 1fr 1fr; grid-template-rows : 200px 200px; 그리드 간격 : 10px; grid-template-areas : "상자 -1 상자 -2 상자 -3"상자 -4 상자 -5 상자 -6 "; . 상자 -1 격자 영역 : 상자 -1; .box-2 grid-area : box-2; . 박스 -3 격자 영역 : 박스 -3; . 박스 -4 격자 영역 : 박스 -4; .box-5 grid-area : box-5; .box-6 grid-area : box-6;
공백 영역 컬럼을 형성 할 필요는 없다., 그들 어디든있을 수있다. 그리드에.
그만큼 반복() 기능
또한 fr 단위 함께 반복() 기능 a를 위해 간단한 구문. , 간단한 그리드 만 사용하고 싶을 때 편리 할 수 있습니다. 복잡한 레이아웃을 구현하다, 예를 들어 중첩 된 표.
.래퍼 디스플레이 : 그리드; grid-template-columns : 반복 (3, 1fr); / * grid-template-columns : 1fr 1fr 1fr; * / grid-template-rows : 200px; 그리드 간격 : 10px;
그만큼 반복 (3, 1fr) 통사론 같은 레이아웃의 결과 같이 1fr 1fr 1fr. 아래 레이아웃은 첫 번째 예제와 동일합니다..
만약 너라면 배율을 높이다 내부 반복() 기능을 사용하면 더 많은 열을 갖게됩니다. 예를 들어, 반복 (6, 1fr) ~의 결과 6 개의 등호. 이 경우 모든 상자 같은 줄에있을거야., 즉, 하나의 값 (200 픽셀) 만 사용하면됩니다. 격자 - 템플릿 - 행 재산.
.래퍼 디스플레이 : 그리드; grid-template-columns : 반복 (6, 1fr); grid-template-rows : 200px; 그리드 간격 : 10px;
당신이 사용할 수있는 반복() 두 번 이상. 예를 들어 다음 예제에서는 마지막 세 열이 두 배 폭 처음 세 명으로.
.래퍼 디스플레이 : 그리드; grid-template-columns : 반복 (3, 1fr) 반복 (3, 2fr); grid-template-rows : 200px; 그리드 간격 : 10px;
당신은 또한 수 콤바인 반복() 다른 CSS 단위로. 예를 들어 200px 반복 (4, 1fr) 200px 유효한 코드로.
방법에 관심이 있다면 복잡한 레이아웃 만들기 CSS Grid 모듈을 사용하면 반복() 기능과 fr 레이첼 앤드류 (Rachel Andrew)는 어떻게 할 수 있는지에 대한 흥미로운 블로그 글을 가지고 있습니다..
실험을위한 데모
마침내, 여기에 내가 약속 한 데모가있다.. 이 기사의 첫 번째 예제와 동일한 코드를 사용합니다. 포크로 그걸로 무엇을 얻을 수 있는지보십시오. fr 단위.
