쉽고 반응이 좋은 최신 CSS 그리드 레이아웃
- Joseph Gordon-Levitt원래의
- 2025-02-10 10:13:10749검색
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을 사용하여 지원을 확인할 수 있습니다. -
그리드 레이아웃에는 속성이 또는 로 설정된 상위 컨테이너가 있습니다. 컨테이너의 자식 요소는 그리드 품목이며 강력한 그리드 알고리즘으로 인해 암시 적으로 위치합니다. 다른 클래스를 적용하여 프로젝트의 배치, 크기, 위치 및 기타 측면을 제어 할 수도 있습니다.
<code class="language-html"><!DOCTYPE html>
<title>CSS Grid Layout Example</title>
<link rel="stylesheet" href="style.css">
<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>
</code> 태그가 포함될 수 있습니다.
<article></article> <article></article>
다음, 기본 CSS 스타일을 추가합시다. 문서의 헤드에 <article></article>
함수를 사용하여 신체 부위의 나머지 너비를 계산하고 설정합니다. 주요 부분에는 수직 블록으로 구성된 프로젝트 라이브러리가 포함되어 있습니다. 
<style></style>
<code class="language-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;
}</code> 진보적 인 향상 : 모든 것을 다룰 필요는 없습니다 위 내용은 쉽고 반응이 좋은 최신 CSS 그리드 레이아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!