CSS 그리드 그리드 레이아웃이란 무엇입니까?-CSS 지식-php.cn

집

일일 프로그램

CSS 지식

CSS 그리드 그리드 레이아웃이란 무엇입니까?

藏色散人

Nov 12, 2018 pm 05:31 PM

이 글에서는 주로 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>

로그인 후 복사

효과는 다음과 같습니다:

CSS 그리드 그리드 레이아웃이란 무엇입니까? 위 코드에서

display를 설정했습니다. 지정된 컨테이너

에 대한 그리드 속성은 그리드 레이아웃 사용을 시작한다는 의미입니다. 즉, 요소를 그리드 컨테이너로 정의하고 열(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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