코어 포인트
CSS 그리드는 HTML이 아닌 CSS에서 그리드 구조를 생성 할 수있는 강력한 레이아웃 시스템입니다. 대부분의 최신 브라우저는 이전 버전을 지원하는 IE11을 제외하고이를 지원합니다.
이 기사에서는 반응 형 최신 CSS 그리드 레이아웃을 만드는 방법을 보여주고 CSS 그리드를 점차 추가하고 이전 브라우저에 폴백 코드를 제공하는 방법을 보여줍니다. 여기에는 센터 요소에 대한 기술, 스팬 프로젝트 및 소형 장비의 레이아웃을 조정하는 것이 포함됩니다.
CSS 그리드는 그리드 항목을 찾기위한 및 와 같은 속성뿐만 아니라 항목을 정렬하고 조정하기위한 유틸리티를 제공합니다. 또한 그리드 하위 요소 자체가 그리드 컨테이너가 될 수있는 중첩 그리드를 허용합니다.
소형 스크린 장치의 경우 레이아웃 구조를 쉽게 변경하여 CSS 그리드로 선형화하고 그리드 영역을 재정의하고 미디어 쿼리를 사용 할 수 있습니다. 이것은 작은 화면에서보다 편리한 레이아웃을 만듭니다. -
이 기사는 반응 형 최신 CSS 그리드 레이아웃을 만드는 방법, 이전 브라우저에 폴백 코드를 사용하는 방법, 단계별로 CSS 그리드를 추가하는 방법, 소형 장치에서 레이아웃을 재건하고 정렬 속성 센터링을 사용하는 방법을 보여줍니다. 강요. -
이전 기사에서는 반응 형 그리드 레이아웃을 쉽게 구축하기위한 4 가지 기술을 탐색했습니다. 이 게시물은 CSS 그리드를 사용할 수 있기 전에 2014 년에 작성되었습니다.이 자습서에서는 유사한 HTML 구조를 사용하지만 최신 CSS 그리드 레이아웃을 사용합니다.
grid-column
이 튜토리얼에서는 플로트를 사용하여 기본 레이아웃이있는 데모를 만들고 CSS 그리드로 향상시킵니다. 우리는 그리드 영역을 재정의하고 미디어 쿼리를 사용하여 소형 장치에서 센터링 요소, 스패닝 프로젝트 및 쉽게 변경되는 레이아웃과 같은 유용한 유용성을 보여줄 것입니다. 이 CodePen에서 코드를 찾을 수 있습니다 : CodePen Link grid-row justify-items.
반응 형 현대 CSS 그리드 레이아웃 align-items
반응 형 그리드 데모를 만들기 전에 먼저 CSS 그리드를 소개합시다. align-self
CSS 그리드는 2017 년에 대부분의 현대식 브라우저에 추가 된 강력한 2 차원 시스템입니다. HTML 레이아웃을 만드는 방식을 완전히 변경합니다. 그리드 레이아웃을 사용하면 HTML이 아닌 CSS에서 그리드 구조를 만들 수 있습니다.
IE11 외에도 대부분의 최신 브라우저는 CSS 그리드를 지원하므로 기존 버전의 표준을 지원합니다. caniuse.com을 사용하여 지원을 확인할 수 있습니다. -
그리드 레이아웃에는 속성이 또는 로 설정된 상위 컨테이너가 있습니다. 컨테이너의 자식 요소는 그리드 품목이며 강력한 그리드 알고리즘으로 인해 암시 적으로 위치합니다. 다른 클래스를 적용하여 프로젝트의 배치, 크기, 위치 및 기타 측면을 제어 할 수도 있습니다.
기본 HTML 페이지부터 시작하겠습니다. HTML 파일을 만들고 다음을 추가하십시오
우리는 HTML 시맨틱을 사용하여 페이지의 제목, 사이드 바, 본문 및 바닥 글 부분을 정의합니다. 메인 섹션에서는
태그를 사용하여 항목 세트를 추가합니다. 는 독립적이고 독립적 인 콘텐츠를 감싸는 데 사용할 수있는 HTML5 시맨틱 태그입니다. 단일 페이지에는 모든 <!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2>CSS Grid Layout Example</h2>
</header>
<aside class="sidebar">
<p>Sidebar</p>
</aside>
<main>
<article>1</article>
<article>2</article>
<article>11</article>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html>로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
이것은이 단계에서 페이지의 스크린 샷입니다.
<article> <<> <article>
<'s> 다음, 기본 CSS 스타일을 추가합시다. 문서의 헤드에 태그를 추가하고 다음 스타일을 추가하십시오 : <article>
이것은 작은 데모 페이지이므로 클래스 이름 지정 시스템을 적용하지 않고 가독성을 위해 태그를 직접 스타일링합니다.
우리는 플로트를 사용하여 사이드 바를 왼쪽에 놓고 본체를 오른쪽으로 배치하고 사이드 바의 너비를 고정 <🎜 🎜> 6.3rem
너비로 설정합니다. 그런 다음 CSS 함수를 사용하여 신체 부위의 나머지 너비를 계산하고 설정합니다. 주요 부분에는 수직 블록으로 구성된 프로젝트 라이브러리가 포함되어 있습니다. 
<<>
레이아웃은 완벽하지 않습니다. 예를 들어, 사이드 바의 높이는 기본 내용 부분의 높이와 다릅니다. 이러한 문제를 해결할 수있는 다양한 CSS 기술이 있지만 대부분 팁이나 해결 방법입니다. 이 레이아웃은 그리드의 폴백이므로 사용자 수가 적고 적습니다. 폴백은 이용 가능하고 충분합니다. <style>
최신 버전의 Chrome, Firefox, Edge, Opera 및 Safari는 모두 CSS 그리드를 지원하므로 방문자가 이러한 브라우저를 사용하는 경우 폴백을 제공하는 것에 대해 걱정할 필요가 없습니다. 또한 상록 브라우저를 고려해야합니다. Chrome, Firefox, Edge 및 Safari의 최신 버전은 상록수 브라우저입니다. 즉, 사용자에게 홍보하지 않고 자동으로 그리고 조용히 업데이트됩니다. 모든 브라우저에서 레이아웃이 올바르게 작동하는지 확인하려면 플로팅 기반 기본 폴백으로 시작한 다음 점진적인 향상 기술을 사용하여 최신 그리드 레이아웃을 적용 할 수 있습니다. 이전 브라우저를 사용하는 사용자는 같은 경험을 얻지 못하지만 충분합니다.
body {
background: #12458c;
margin: 0rem;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
header {
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
color: #fff;
border-style: solid;
border-width: 2px;
}
aside {
color: #fff;
border-width:2px;
border-style: solid;
float: left;
width: 6.3rem;
}
footer {
color: #fff;
border-width:2px;
border-style: solid;
clear: both;
}
main {
float: right;
width: calc(100% - 7.2rem);
padding: 5px;
background: hsl(240, 100%, 50%);
}
main > article {
background: hsl(240, 100%, 50%);
background-image: url('https://source.unsplash.com/daily');
color: hsl(240, 0%, 100%);
border-width: 5px;
}로그인 후 복사
로그인 후 복사
<🎜 🎜>
폴백 레이아웃 위에 CSS 그리드 레이아웃을 추가 할 때 모든 태그를 덮어 쓰거나 완전히 별도의 CSS 스타일을 사용할 필요는 없습니다.
CSS 그리드를 지원하지 않는 브라우저에서 추가 된 그리드 특성은 간단히 무시됩니다. -
플로트에 레이아웃 요소를 사용하는 경우 그리드 항목이 플로트보다 우선 순위를 정합니다. 즉, 그리드 요소 (<🎜 🎜> 스타일의 부모 요소의 자식) 인 요소에
스타일을 추가하면 플로트가 무시되고 그리드가 취해집니다. -
float: left|right 규칙은 CSS의 특정 기능에 대한 지원을 확인하는 데 사용될 수 있습니다. 이를 통해 필요한 경우 폴백 스타일을 무시할 수 있지만 이전 브라우저는 display: grid 블록을 무시합니다.
-
<'s> 이제 CSS 그리드를 우리 페이지에 추가합시다. 먼저, 그리드 컨테이너로 <'s>를 표시하고 그리드 열, 행 및 영역을 설정하겠습니다.
@supports
<<> 우리는 @supports 속성을 사용하여 그리드 컨테이너로 표시합니다. 우리는 0.1VW의 그리드 간격을 설정했습니다. GAP를 사용하면 여백을 사용하는 대신 그리드 셀 사이에 슬롯을 만들 수 있습니다. 또한 를 사용하여 두 개의 열을 추가합니다. 첫 번째 열은 고정 너비가 6.5 REM을 채택하고 두 번째 열은 잔류 너비를 채택합니다. 는 분수 단위이며 1fr은 사용 가능한 공간의 일부와 같습니다.
다음으로
, <🎜 🎜>, , <🎜 🎜>, <🎜 🎜>, <🎜 - 및 그리드 항목을 정렬하고 조정하는 데 사용할 수 있습니다. . 실제로 CSS 박스 정렬 모듈의 일부입니다.
grid-row-start
<🎜 , - ,
grid-row-end 및 <🎜 🎜> 셀렉터에 다음을 추가하십시오 : <🎜 🎜>
-
grid-column-start <<>는 행 축 또는 수평 방향을 따라 그리드 항목을 조정하는 데 사용됩니다.
- <<> 기둥 축 또는 수직 방향을 따라 그리드 항목을 정렬합니다. 그들은 모두 <<<>,
grid-column-end, 및 <🎜 값을 취할 수 있습니다.
이것은 센터링 요소의 스크린 샷입니다
span <<>
작은 장치에서 그리드 레이아웃을 재구성하십시오 <🎜 🎜> 우리의 데모 레이아웃은 중간 크기 및 대형 화면에 편리하지만 소형 스크린 장치 용 페이지를 만드는 가장 좋은 방법은 아닐 수 있습니다. CSS 그리드를 사용하면 그리드 영역을 재정의하고 미디어 쿼리를 사용 하여이 레이아웃 구조를 쉽게 변경하여 작은 장치에서 선형화 할 수 있습니다.
다음은 작은 장치에서 레이아웃을 재구성하기 위해 코드를 추가하기 전에 스크린 샷입니다.
<<>
이제 다음 CSS 코드를 추가하십시오
폭이 575 픽셀 미만인 장치에서 레이아웃은 선형이됩니다.
<<> 
사이드 바의 너비는 사용 가능한 너비를 채우지 않습니다. 이것은 폴백 코드로 인해 발생하므로 그리드 지원 브라우저에서
재정의 <🎜 🎜>를 사용하는 것입니다.
이것은 최종 결과의 스크린 샷입니다
<<> <!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2>CSS Grid Layout Example</h2>
</header>
<aside class="sidebar">
<p>Sidebar</p>
</aside>
<main>
<article>1</article>
<article>2</article>
<article>11</article>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html>로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
CodePen Link <🎜 🎜> <🎜 🎜>에 직접 액세스 할 수 있습니다.
<🎜 🎜> <<> 결론
이 튜토리얼에서는 CSS 그리드를 사용하여 반응 형 데모 레이아웃을 만들었습니다. 구형 브라우저에 폴백 코드를 사용하고, 단계별 CSS 그리드 추가, 작은 장치에서 레이아웃을 재건하고, 정렬 속성 센터링 요소를 사용하는 것을 보여줍니다. 
<<> 쉽고 반응이 좋은 현대식 CSS 그리드 레이아웃에 대한 FAQ
CSS 그리드와 Flexbox의 차이점은 무엇입니까?
CSS 그리드 및 Flexbox는 모두 CSS의 강력한 레이아웃 시스템입니다. 어떤 경우에는 상호 교환 적으로 사용될 수 있지만 각각 고유 한 이점이 있습니다. Flexbox는 열이나 행에 항목을 할당하는 데 특히 적합한 1 차원 레이아웃 모델입니다. 반면 CSS 그리드는 동시에 행과 열의 요소를 배열하는 데 이상적인 2 차원 레이아웃 시스템입니다. 복잡한 웹 레이아웃을 만드는 데 적합합니다. width: auto;
CSS 그리드 레이아웃을 반응하는 방법은 무엇입니까? width: 6.3rem;
CSS 그리드를 사용하면 미디어 쿼리없이 반응 형 레이아웃을 쉽게 만들 수 있습니다. 그리드 컨테이너의 사용 가능한 공간의 일부를 나타내는
단위를 사용할 수 있습니다. 예를 들어, 3 개의 단일 단지 열을 원한다면 <🎜 🎜>를 사용할 수 있습니다. 열이 화면에 맞게 자동으로 크기를 조정합니다. body {
background: #12458c;
margin: 0rem;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
header {
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
color: #fff;
border-style: solid;
border-width: 2px;
}
aside {
color: #fff;
border-width:2px;
border-style: solid;
float: left;
width: 6.3rem;
}
footer {
color: #fff;
border-width:2px;
border-style: solid;
clear: both;
}
main {
float: right;
width: calc(100% - 7.2rem);
padding: 5px;
background: hsl(240, 100%, 50%);
}
main > article {
background: hsl(240, 100%, 50%);
background-image: url('https://source.unsplash.com/daily');
color: hsl(240, 0%, 100%);
border-width: 5px;
}로그인 후 복사
로그인 후 복사
예, CSS 그리드 및 Flexbox는 레이아웃에 함께 사용할 수 있습니다. CSS 그리드를 사용하여 전체 페이지 레이아웃을 생성 한 다음 Flexbox를 사용하여 그리드 셀 내의 개별 구성 요소 또는 부품을 레이아웃 할 수 있습니다. 이 조합은 높은 수준의 유연성과 레이아웃에 대한 제어를 허용합니다.
CSS 그리드에서 항목을 정렬하는 방법은 무엇입니까?
CSS 그리드는 , ,
및 를 포함하여 항목을 정렬하기위한 몇 가지 속성을 제공합니다. 이러한 특성은 행 축 (정렬) 또는 열 축 (정렬)을 따라 항목을 정렬하는 데 사용될 수 있습니다. 예를 들어, 는 라인 축을 따라 항목을 중심으로합니다. justify-items
그리드 프로젝트간에 갭을 만드는 방법은 무엇입니까? align-items
justify-self 속성을 사용하여 그리드 항목 사이의 간격을 생성 할 수 있습니다. 이 속성은 align-self 및 justify-items: center의 약어입니다. 예를 들어,
는 모든 그리드 품목 사이에 20px 간격을 만듭니다.
CSS 그리드에서
및 키워드는 어떻게 작동합니까? grid-gap
grid-row-gap 및 grid-column-gap 키워드는 및 속성의 함수와 함께 사용됩니다. 가능한 많은 항목을 사용하여 행이나 열을 채우고 불충분 한 항목이없는 경우 빈 셀을 만듭니다. 는 비슷하게 행동하지만 빈 셀이 무너져 항목이 줄이나 열을 채우도록 늘립니다. grid-gap: 20px
CSS 그리드에서 품목을 겹치는 방법은 무엇입니까?
CSS 그리드에서는 동일한 그리드 셀에 품목을 배치하거나 여러 셀에 걸쳐있는 항목을 겹칠 수 있습니다. 속성을 사용하여 겹치는 항목의 스택 순서를 제어 할 수 있습니다.
모든 브라우저에서 CSS 그리드를 사용할 수 있습니까? auto-fill
CSS 그리드는 Chrome, Firefox, Safari 및 Edge와 같은 모든 최신 브라우저에서 지원됩니다. 그러나 Internet Explorer는이를 지원하지 않습니다. Internet Explorer를 지원 해야하는 경우 폴백 레이아웃을 사용해야 할 수도 있습니다. auto-fit
CSS 그리드에서 중첩 그리드를 만드는 방법은 무엇입니까?
메쉬 항목 자체를 메쉬 컨테이너로 설정하여 중첩 메쉬를 만들 수 있습니다. 그리드 프로젝트에 를 바르고 그리드 컨테이너와 마찬가지로 그리드 레이아웃을 정의하십시오.
CSS 그리드에서 그리드 트랙의 크기를 제어하는 방법은 무엇입니까? auto-fill
및 auto-fit 속성을 사용하여 그리드 트랙 (행 및 열)의 크기를 제어 할 수 있습니다. 픽셀 (px), 백분율 (%) 또는 분수 (FR)와 같은 다양한 단위를 사용하여 크기를 지정할 수 있습니다. grid-template-columns
위의 내용은 원본 텍스트를 크게 다시 작성하고 연마하여 기사를 더 매끄럽고 읽기 쉽고 독창적 인 온라인 기사의 글쓰기 스타일에 따라 원래 의미를 변경하지 않기 위해 노력했습니다. 이미지 형식은 동일하게 유지됩니다. 외부 웹 사이트 및 파일에 액세스 할 수 없기 때문에 Codepen 링크를 사용할 수 없습니다. 직접 교체하십시오. grid-template-rows
위 내용은 쉽고 반응이 좋은 최신 CSS 그리드 레이아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
