쉽고 반응이 좋은 최신 CSS 그리드 레이아웃
CSS 그리드는 HTML이 아닌 CSS에서 그리드 구조를 생성 할 수있는 강력한 레이아웃 시스템입니다. 대부분의 최신 브라우저는 이전 버전을 지원하는 IE11을 제외하고이를 지원합니다.
이 기사에서는 반응 형 최신 CSS 그리드 레이아웃을 만드는 방법을 보여주고 CSS 그리드를 점차 추가하고 이전 브라우저에 폴백 코드를 제공하는 방법을 보여줍니다. 여기에는 센터 요소에 대한 기술, 스팬 프로젝트 및 소형 장비의 레이아웃을 조정하는 것이 포함됩니다.-
CSS 그리드는 그리드 항목을 찾기위한 및 와 같은 속성뿐만 아니라 항목을 정렬하고 조정하기위한 유틸리티를 제공합니다. 또한 그리드 하위 요소 자체가 그리드 컨테이너가 될 수있는 중첩 그리드를 허용합니다.
- 이 기사는 반응 형 최신 CSS 그리드 레이아웃을 만드는 방법, 이전 브라우저에 폴백 코드를 사용하는 방법, 단계별로 CSS 그리드를 추가하는 방법, 소형 장치에서 레이아웃을 재건하고 정렬 속성 센터링을 사용하는 방법을 보여줍니다. 강요.
-
이전 기사에서는 반응 형 그리드 레이아웃을 쉽게 구축하기위한 4 가지 기술을 탐색했습니다. 이 게시물은 CSS 그리드를 사용할 수 있기 전에 2014 년에 작성되었습니다.이 자습서에서는 유사한 HTML 구조를 사용하지만 최신 CSS 그리드 레이아웃을 사용합니다. grid-column이 튜토리얼에서는 플로트를 사용하여 기본 레이아웃이있는 데모를 만들고 CSS 그리드로 향상시킵니다. 우리는 그리드 영역을 재정의하고 미디어 쿼리를 사용하여 소형 장치에서 센터링 요소, 스패닝 프로젝트 및 쉽게 변경되는 레이아웃과 같은 유용한 유용성을 보여줄 것입니다. 이 CodePen에서 코드를 찾을 수 있습니다 : CodePen Link grid-rowjustify-items. 반응 형 현대 CSS 그리드 레이아웃align-items반응 형 그리드 데모를 만들기 전에 먼저 CSS 그리드를 소개합시다. align-selfCSS 그리드는 2017 년에 대부분의 현대식 브라우저에 추가 된 강력한 2 차원 시스템입니다. HTML 레이아웃을 만드는 방식을 완전히 변경합니다. 그리드 레이아웃을 사용하면 HTML이 아닌 CSS에서 그리드 구조를 만들 수 있습니다.
IE11 외에도 대부분의 최신 브라우저는 CSS 그리드를 지원하므로 기존 버전의 표준을 지원합니다. caniuse.com을 사용하여 지원을 확인할 수 있습니다. -
그리드 레이아웃에는 속성이 또는 로 설정된 상위 컨테이너가 있습니다. 컨테이너의 자식 요소는 그리드 품목이며 강력한 그리드 알고리즘으로 인해 암시 적으로 위치합니다. 다른 클래스를 적용하여 프로젝트의 배치, 크기, 위치 및 기타 측면을 제어 할 수도 있습니다. - 및 그리드 항목을 정렬하고 조정하는 데 사용할 수 있습니다. . 실제로 CSS 박스 정렬 모듈의 일부입니다.
grid-row-start<🎜 , - ,
grid-row-end및 <🎜 🎜> 셀렉터에 다음을 추가하십시오 : <🎜 🎜> -
grid-column-start<<>는 행 축 또는 수평 방향을 따라 그리드 항목을 조정하는 데 사용됩니다. - <<> 기둥 축 또는 수직 방향을 따라 그리드 항목을 정렬합니다. 그들은 모두 <<<>,
grid-column-end, 및 <🎜 값을 취할 수 있습니다.
<!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>
<'s> 다음, 기본 CSS 스타일을 추가합시다. 문서의 헤드에 <article>
함수를 사용하여 신체 부위의 나머지 너비를 계산하고 설정합니다. 주요 부분에는 수직 블록으로 구성된 프로젝트 라이브러리가 포함되어 있습니다. 
<style>
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;
}- , <🎜 🎜>, <🎜 🎜>, <🎜
span <<>
<<> 
<!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 Link <🎜 🎜> <🎜 🎜>에 직접 액세스 할 수 있습니다. <🎜 🎜> <<> 결론
CSS 그리드 및 Flexbox는 모두 CSS의 강력한 레이아웃 시스템입니다. 어떤 경우에는 상호 교환 적으로 사용될 수 있지만 각각 고유 한 이점이 있습니다. Flexbox는 열이나 행에 항목을 할당하는 데 특히 적합한 1 차원 레이아웃 모델입니다. 반면 CSS 그리드는 동시에 행과 열의 요소를 배열하는 데 이상적인 2 차원 레이아웃 시스템입니다. 복잡한 웹 레이아웃을 만드는 데 적합합니다. width: auto;
width: 6.3rem;
CSS 그리드를 사용하면 미디어 쿼리없이 반응 형 레이아웃을 쉽게 만들 수 있습니다. 그리드 컨테이너의 사용 가능한 공간의 일부를 나타내는
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 그리드는 , ,
및 를 포함하여 항목을 정렬하기위한 몇 가지 속성을 제공합니다. 이러한 특성은 행 축 (정렬) 또는 열 축 (정렬)을 따라 항목을 정렬하는 데 사용될 수 있습니다. 예를 들어, 는 라인 축을 따라 항목을 중심으로합니다. justify-items
align-items
justify-self 속성을 사용하여 그리드 항목 사이의 간격을 생성 할 수 있습니다. 이 속성은 align-self 및 justify-items: center의 약어입니다. 예를 들어,
CSS 그리드에서
및 키워드는 어떻게 작동합니까? grid-gap
grid-row-gap 및 grid-column-gap 키워드는 및 속성의 함수와 함께 사용됩니다. grid-gap: 20px
모든 브라우저에서 CSS 그리드를 사용할 수 있습니까? auto-fill
CSS 그리드는 Chrome, Firefox, Safari 및 Edge와 같은 모든 최신 브라우저에서 지원됩니다. 그러나 Internet Explorer는이를 지원하지 않습니다. Internet Explorer를 지원 해야하는 경우 폴백 레이아웃을 사용해야 할 수도 있습니다. auto-fit
CSS 그리드에서 중첩 그리드를 만드는 방법은 무엇입니까?
auto-fill
CSS 그리드는 Chrome, Firefox, Safari 및 Edge와 같은 모든 최신 브라우저에서 지원됩니다. 그러나 Internet Explorer는이를 지원하지 않습니다. Internet Explorer를 지원 해야하는 경우 폴백 레이아웃을 사용해야 할 수도 있습니다. auto-fit
auto-fill
auto-fit 속성을 사용하여 그리드 트랙 (행 및 열)의 크기를 제어 할 수 있습니다. 픽셀 (px), 백분율 (%) 또는 분수 (FR)와 같은 다양한 단위를 사용하여 크기를 지정할 수 있습니다. grid-template-columns
grid-template-rows
위 내용은 쉽고 반응이 좋은 최신 CSS 그리드 레이아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
끈적 끈적한 포지셔닝 및 대시 Sass가있는 쌓인 카드
Apr 03, 2025 am 10:30 AM
다른 날, 나는 Corey Ginnivan의 웹 사이트에서 스크롤 할 때 카드 모음이 서로 쌓이는 것을 발견했습니다.
Google 글꼴 변수 글꼴
Apr 09, 2025 am 10:42 AM
Google Fonts가 새로운 디자인 (트윗)을 출시 한 것을 볼 수 있습니다. 마지막 큰 재 설계와 비교할 때 이것은 훨씬 더 반복적 인 느낌이 듭니다. 차이를 간신히 말할 수 있습니다
HTML, CSS 및 JavaScript로 애니메이션 카운트 다운 타이머를 만드는 방법
Apr 11, 2025 am 11:29 AM
프로젝트에 카운트 다운 타이머가 필요한 적이 있습니까? 그런 것은 플러그인에 도달하는 것이 당연하지만 실제로는 훨씬 더 많습니다.
플렉스 레이아웃의 자주색 슬래시 영역이 잘못된 '오버플로 공간'으로 간주되는 이유는 무엇입니까?
Apr 05, 2025 pm 05:51 PM
플렉스 레이아웃의 보라색 슬래시 영역에 대한 질문 플렉스 레이아웃을 사용할 때 개발자 도구 (d ...)와 같은 혼란스러운 현상이 발생할 수 있습니다.
CSS를 통해 일류 이름 항목으로 자식 요소를 선택하는 방법은 무엇입니까?
Apr 05, 2025 pm 11:24 PM
요소 수가 고정되지 않은 경우 CSS를 통해 지정된 클래스 이름의 첫 번째 자식 요소를 선택하는 방법. HTML 구조를 처리 할 때 종종 다른 요소를 만듭니다 ...
Sass를 더 빨리 만들기위한 개념 증명
Apr 16, 2025 am 10:38 AM
새로운 프로젝트가 시작될 때, Sass 컴파일은 눈을 깜박이게합니다. 특히 BrowserSync와 짝을 이루는 경우 기분이 좋습니다.
프론트 엔드 개발에서 CSS 및 JavaScript를 사용하여 Windows 10 설정 인터페이스와 유사한 검색등 효과를 달성하는 방법은 무엇입니까?
Apr 05, 2025 pm 10:21 PM
프론트 엔드 개발에서 Windows와 같은 구현 방법 ...
