CSS 그리드 그리드 레이아웃이란 무엇입니까?
- 藏色散人원래의
- 2018-11-12 17:31:136571검색
이 글에서는 주로 CSS 그리드 레이아웃, 즉 그리드 레이아웃에 대한 기본 지식을 소개합니다.
추천 참고 학습: "CSSTutorial"
프론트엔드 초보자를 위한 CSS 그리드 레이아웃#🎜🎜의 개념 #조금 낯설 수도 있습니다. 실제로 이해하기가 매우 쉽습니다. 우리 모두는 CSS가 웹 페이지 스타일을 배치하는 데 사용된다는 것을 알고 있습니다. 일반적으로 CSS 그리드 레이아웃이라고도 알려진 CSS 그리드 레이아웃은 웹 페이지 호환성, 상자 부동 및 위치 지정과 같은 해킹 구현 문제를 고려해야 합니다. 이 문제를 해결하기 위해 특별히 만들어진 모듈입니다.
간단히 말해서CSS Grid 레이아웃 은 열과 행을 동시에 처리할 수 있는 2차원 그리드 기반 레이아웃 시스템입니다. 목표는 그리드 디자인을 기반으로 사용자 인터페이스에 접근하는 방식을 바꾸는 것입니다.
아래에서는 간단한Grid 레이아웃 예제:
Grid 레이아웃#🎜🎜을 통해 그리드 그리드 레이아웃을 소개합니다. #의 간단한 코드 예는 다음과 같습니다: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid网格布局示例</title>
</head>
<style>
.wrapper {
display: grid;
grid-template-rows: 100px 100px 100px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 4;
}
.item1{
background: #333333;
}
</style>
<body>
<div class="wrapper">
<div class="item1" style=" background: #745A74;">大导航</div>
<div class="item2" style="background: #CCCC66">2</div>
<div class="item3" style="background: #FFCFCF">3</div>
<div class="item4" style="background: aquamarine">4</div>
<div class="item5" style="background: chartreuse">5</div>
<div class="item6" style="background: darkorange">6</div>
</div>
</body>
</html>효과는 다음과 같습니다:
위 코드에서
에 대한 그리드 속성은 그리드 레이아웃 사용을 시작한다는 의미입니다. 즉, 요소를 그리드 컨테이너로 정의하고 열(grid-template-columns) 및 행(grid-template-rows)의 크기를 설정한다는 의미입니다. 를 누른 다음 Grid-column을 누르면 Grid-row가 하위 요소를 컨테이너에 넣습니다. 중요 속성 소개:
grid-template-rows 속성은 다음을 기반으로 합니다. 그리드 라인의 이름과 그리드 트랙의 크기를 정의하는 그리드 행 차원.
grid-template-columns 속성은 그리드 열의 치수를 기반으로 하며 그리드 선의 이름과 치수를 정의합니다. 그리드 트랙 크기.
Grid-column-start 속성은 그리드 위치를 제공하여 그리드 열에서 그리드 항목의 시작 위치를 지정합니다. , 범위 또는 자동으로. 이 시작 위치는 그리드 영역의 블록 시작 가장자리를 정의합니다.
Grid-column-end 속성은 기여 라인, 범위 또는 없음( 자동)을 그리드 열 내의 끝 위치로 지정하여 그리드 영역에 대한 블록의 끝 가장자리를 지정합니다. 이 글은
CSS Grid Grid Layout에 대한 간단한 기본 지식 소개입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!
위 내용은 CSS 그리드 그리드 레이아웃이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!