쉽고 반응이 좋은 최신 CSS 그리드 레이아웃-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

쉽고 반응이 좋은 최신 CSS 그리드 레이아웃

Joseph Gordon-Levitt

Feb 10, 2025 am 10:13 AM

Easy and Responsive Modern CSS Grid Layout

코어 포인트

CSS 그리드는 HTML이 아닌 CSS에서 그리드 구조를 생성 할 수있는 강력한 레이아웃 시스템입니다. 대부분의 최신 브라우저는 이전 버전을 지원하는 IE11을 제외하고이를 지원합니다.

이 기사에서는 반응 형 최신 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 id="CSS-Grid-Layout-Example">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> <article></article> 다음, 기본 CSS 스타일을 추가합시다. 문서의 헤드에 태그를 추가하고 다음 스타일을 추가하십시오 : <article></article>
이것은 작은 데모 페이지이므로 클래스 이름 지정 시스템을 적용하지 않고 가독성을 위해 태그를 직접 스타일링합니다.
우리는 플로트를 사용하여 사이드 바를 왼쪽에 놓고 본체를 오른쪽으로 배치하고 사이드 바의 너비를 고정 6.3rem
너비로 설정합니다. 그런 다음 CSS
함수를 사용하여 신체 부위의 나머지 너비를 계산하고 설정합니다. 주요 부분에는 수직 블록으로 구성된 프로젝트 라이브러리가 포함되어 있습니다.

레이아웃은 완벽하지 않습니다. 예를 들어, 사이드 바의 높이는 기본 내용 부분의 높이와 다릅니다. 이러한 문제를 해결할 수있는 다양한 CSS 기술이 있지만 대부분 팁이나 해결 방법입니다. 이 레이아웃은 그리드의 폴백이므로 사용자 수가 적고 적습니다. 폴백은 이용 가능하고 충분합니다. <style></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 블록을 무시합니다.

이제 CSS 그리드를 우리 페이지에 추가합시다. 먼저, 그리드 컨테이너로 를 표시하고 그리드 열, 행 및 영역을 설정하겠습니다. @supports 우리는 @supports 속성을 사용하여 그리드 컨테이너로 표시합니다. 우리는 0.1VW의 그리드 간격을 설정했습니다. GAP를 사용하면 여백을 사용하는 대신 그리드 셀 사이에 슬롯을 만들 수 있습니다. 또한
를 사용하여 두 개의 열을 추가합니다. 첫 번째 열은 고정 너비가 6.5 REM을 채택하고 두 번째 열은 잔류 너비를 채택합니다. 는 분수 단위이며 1fr은 사용 가능한 공간의 일부와 같습니다.
다음으로 우리는
를 사용하여 세 줄을 추가합니다. 첫 번째 행은 6REM의 고정 높이를 사용하고, 세 번째 행은 고정 높이 3REM을 사용하고 나머지 여유 공간 (1FR)이 두 번째 행에 할당됩니다. 그런 다음 우리는
를 사용하여 열과 행의 교차로에 의해 생성 된 가상 셀을 영역에 할당합니다. 이제 우리는 를 사용하여 영역 템플릿에 지정된 해당 영역을 실제로 정의해야합니다.
<!DOCTYPE html> <html> <head> <title>CSS Grid Layout Example</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h2 id="CSS-Grid-Layout-Example">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>
대부분의 폴백 코드는 신체 부위의 너비
를 제외하고 CSS 그리드에 부작용이 없습니다. 이는 사이드 바의 너비와 마진/충전 공간을 빼낸 후 신체 부위의 나머지 너비를 계산합니다. display:grid 이것은 결과의 스크린 샷입니다. 주요 영역은 남은 폭을 모두 차지하지는 않습니다. grid-template-columns 이 문제를 해결하기 위해 그리드를 지원할 때 fr를 추가 할 수 있습니다.
이것은 현재 결과의 스크린 샷입니다
grid-template-rows 중첩 메쉬를 추가하십시오 그리드 자식 요소 자체는 그리드 컨테이너 일 수 있습니다. 주요 부품을 그리드 컨테이너로 설정하겠습니다 :
<!DOCTYPE html> <html> <head> <title>CSS Grid Layout Example</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h2 id="CSS-Grid-Layout-Example">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>
우리는 0.1VW의 그리드 간격을 사용하고 함수를 사용하여 열과 행을 정의합니다. 옵션은 여유 공간을 가능한 한 많은 열이나 행으로 채우려 고 시도하고 필요한 경우 암시 적 열이나 행을 만듭니다. 사용 가능한 열이나 행을 사용 가능한 공간에 넣으려면
를 사용해야합니다. repeat(auto-fill, minmax(12rem, 1fr));와 auto-fill의 차이에 대한 좋은 설명을 읽으십시오. auto-fit 이것은 결과의 스크린 샷입니다 : auto-fill auto-fit 그리드
, 및
키워드를 사용하십시오 CSS 그리드는 및
를 제공하며, 이로 인해 그리드 라인을 사용하여 부모 그리드 내의 그리드 항목을 찾을 수 있습니다. 그것들은 다음 속성에 대한 약어입니다
: 그리드 행에서 그리드 항목의 시작 위치를 지정하십시오 . : 그리드 행에서 그리드 항목의 끝 위치를 지정하십시오 .
: 그리드 열에서 그리드 항목의 시작 위치를 지정하십시오. : 그리드 열에서 그리드 항목의 끝 위치를 지정하십시오.
키워드를 사용하여 몇 개의 열이나 행을 지정할 수도 있습니다. grid-column 메인 영역의 두 번째 자식 요소가 4 개의 열과 2 개의 행에 걸쳐 두 번째 열과 첫 번째 열 (기본 위치이기도 함)에서 배치 해 보겠습니다. grid-row 이것은 결과의 스크린 샷입니다 : span
그리드 정렬 유틸리티를 사용하는 우리는 제목, 사이드 바 및 바닥 글의 텍스트를 중앙으로, 요소의 숫자를 중앙에 놓고 싶습니다. grid-column CSS 그리드는 6 개의 속성을 제공합니다 grid-row, , ,
, , , 및 그리드 항목을 정렬하고 조정하는 데 사용할 수 있습니다. . 실제로 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 id="CSS-Grid-Layout-Example">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 :
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 그리드를 사용하여 전체 페이지 레이아웃을 생성 한 다음 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.