Einführung in zwei Methoden des CSS-Rasterlayouts (Grid) (mit Code)-CSS-Tutorial-php.cn

Einführung in zwei Methoden des CSS-Rasterlayouts (Grid) (mit Code)

不言

Freigeben： 2018-08-03 15:45:36

Original

2571 Leute haben es durchsucht

Das CSS-Rasterlayout (Grid) kann Webseiten mit einfachen Attributen in Zeilen und Spalten unterteilen. Sie können CSS direkt verwenden, um jedes Element im Raster zu positionieren und anzupassen, und es ist keine mehrschichtige Einbettung erforderlich, um eine zu erreichen Kurz gesagt, das CSS-Rasterlayout ist sehr einfach zu verwenden. Schauen wir uns den Inhalt des in diesem Artikel beschriebenen CSS-Rasterlayouts an.

1. CSS-Rasterlayout (Raster)

Das CSS-Rasterlayout besteht aus zwei Kernkomponenten: übergeordnetes Element und untergeordnetes Element Elemente sind der Inhalt innerhalb des Rasters.
Das Folgende ist ein übergeordnetes Element und sechs untergeordnete Elemente

   <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>

Nach dem Login kopieren

Um das übergeordnete Element in ein Raster (Raster) umzuwandeln, setzen Sie einfach sein Anzeigeattribut auf Raster

Effektbild:

Einführung in zwei Methoden des CSS-Rasterlayouts (Grid) (mit Code)

Das Folgende ist das Rasterlayout:

 .box {
            width: 350px;
            height: 350px;
            /* background: #ccc; */
            margin: 0 auto;
            grid-gap: 5px;
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
        }

        .item {
            border: 1px solid black;
            box-sizing: border-box;
        }

        .div1 {
            grid-column-start: 1;
            grid-column-end: 3;
            /*(div1从占据从第一条网格线开始，到第三条网格线结束)*/
            line-height: 100px;
            text-align: center;
            background: rgb(252, 0, 0);
            /* grid-column: 1/3;(这是缩写的形式) */
        }

        .div2 {
            line-height: 100px;
            text-align: center;
            background: rgb(252, 134, 0);
        }

        .div3 {
            grid-row-start: 2;
            grid-row-end: 4;
            /* grid-row: 2/4;(这是缩写的形式) */
            line-height: 200px;
            text-align: center;
            background: rgb(21, 207, 108);
        }

        .div4 {
            grid-column-start: 2;
            grid-column-end: 4;
            line-height: 100px;
            text-align: center;
            background: rgb(18, 21, 189);
            /* grid-column: 2/4;(这是缩写的形式) */
        }

        .div5 {
            line-height: 100px;
            text-align: center;
            background: rgb(16, 170, 197);
        }

        .div6 {
            line-height: 100px;
            text-align: center;
            background: rgb(172, 126, 199);
        }

Nach dem Login kopieren

Die Rasterlinien im obigen Code (wie durch die Pfeile dargestellt) Der Ort, auf den gezeigt wird, ist eine Gitterlinie):

Einführung in zwei Methoden des CSS-Rasterlayouts (Grid) (mit Code)

2. Responsives Gitterlayout

Das Gleiche wie oben (mit Folgendem hinzugefügt)
Verwenden Sie die Eigenschaft „grid-template-columns“, um ein 12-Spalten-Raster zu erstellen. Jede Spalte hat eine Einheitsbreite (1/12 der Gesamtbreite)
Verwenden Sie die Eigenschaft „grid-template-columns“ rows-Eigenschaft zum Erstellen von 3 Zeilen

Verwenden Sie die Grid-Gap-Eigenschaft, um eine Lücke zwischen Rasterelementen im Raster hinzuzufügen.

Der Code lautet wie folgt:

       <div class="container">
        <div class="header">顶部（一个点表示一个空白的格子），所以距离左边和右边各有一个格子的距离。</div>
        <div class="menu">中间1</div>
        <div class="content">中间2所以可以利用空白的格子来对你所要拍的网页来进行布局</div>
        <div class="footer">底部（一个点表示一个空白的格子），所以距离右边有三个格子的距离。</div>
    </div>

Nach dem Login kopieren

Raster-Vorlagenbereiche hinzufügen
Dieses Attribut wird Rasterbereich oder auch Vorlagenbereich genannt, was uns die einfache Durchführung von Layout-Experimenten ermöglicht.
Rendering:
Einführung in zwei Methoden des CSS-Rasterlayouts (Grid) (mit Code)

Der Code lautet wie folgt:

        .container {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: 50px 350px 50px;
            grid-gap: 5px;
            grid-template-areas: ". h h h h h h h h h h ." " m m c c c c c c c c c c" "f f f f f f f f f . . .";
        }

        .container>p {
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        .header {
            text-align: center;
            line-height:50px;
            grid-area: h;
            color:rgb(219, 52, 169);
        }

        .menu {
            grid-area: m;
            text-align: center;
            line-height:350px;
        }

        .content {
            text-align: center;
            line-height:350px;
            grid-area: c;
            color:rgb(25, 158, 69);
        }

        .footer {
            color:rgb(212, 112, 18);
            text-align: center;
            line-height:50px;
            grid-area: f;
        }

Nach dem Login kopieren

Empfohlene verwandte Artikel:

Ausführliche Erläuterung des Rasterlayouts in CSS

Grundkenntnisse des CSS3-Rasterlayouts

Das obige ist der detaillierte Inhalt vonEinführung in zwei Methoden des CSS-Rasterlayouts (Grid) (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!