CSS网格合理布局的示例编码

2021-03-18 05:11 jianzhan

本文详细介绍了CSS网格合理布局的示例编码,共享给大伙儿,实际以下:

访问器适配性

能够看出CSS网格合理布局从Safari 10.1, Firefox 52, Chrome 60,Edge 15刚开始遭受适用。

网格合理布局

网页页面基础元素:

    <div class="wrapper">
        <div class="box box1">One</div>
        <div class="box box2">Two</div>
        <div class="box box3">Three</div>
        <div class="box box4">Four</div>
        <div class="box box5">Five</div>
    </div>

款式:

        .wrapper {
            border: 2px solid #f76707;
            border-radius: 5px;
            background-color: #fff4e6;
        }
        .box {
            border: 2px solid #FDC180;
        }

根据在元素上申明 display:grid 或 display:inline-grid 来建立1个网格器皿:

    .wrapper {
        display: grid;
    }

以下实际效果:

界定网格中的行和列

根据 grid-template-columns和grid-template-rows特性来界定网格中的行和列。这些特性界定了网格的路轨。网格路轨是网格中随意两条线之间的室内空间。

以下网格,包括了3个200像素宽的列路轨:

    .wrapper {
        display: grid;
        grid-template-columns: 200px 200px 200px;
    }

fr企业

新的fr企业意味着网格器皿中能用室内空间的1等份。下1个网格界定将建立3个相同宽度的路轨,这些路轨会伴随着能用室内空间提高和收拢。

    .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

还可以和像素企业混用:

        .wrapper {
            display: grid;
            grid-template-columns: 500px 1fr 2fr;
        }

在路轨清单中应用repeat()

repeat 的英语的语法以下:

repeat(number of columns/rows, the column width we want);

拥有多路轨的大中型网格可以使用 repeat() 标识来反复一部分或全部路轨目录。以下方的网格界定:

    .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

能够写成:

    .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

Repeat 句子能够用于反复路轨目录中的1一部分。在下面的事例中我建立了1个网格:它起止路轨为20像素,接侧重复了6个1fr的路轨,最终再加上了1个20像素的路轨。

    .wrapper {
        display: grid;
        grid-template-columns: 20px repeat(6, 1fr) 20px;
    }

Repeat 句子能够传入1个路轨目录,因而你能够用它来建立1个多路轨方式的反复路轨目录。在下1个事例中,网格将有总共10个路轨,为1个1fr路轨后边跟随1个2fr路轨,该方式反复5次。

    .wrapper {
        display: grid;
        grid-template-columns: repeat(5, 1fr 2fr);
    }

grid-auto-rows 和 grid-auto-columns

建立上文中网格事例的情况下,大家用 grid-template-columns 特性界定了自身的列路轨,可是却让网格按所需的內容建立行,这些行会被建立在隐式网格中。显式网格包括了你在 grid-template-columns 和 grid-template-rows 特性中界定的行和列。假如你在网格界定以外又放了1些物品,或由于內容的数量而必须的更多网格路轨的情况下,网格可能在隐式网格中建立行和列。依照默认设置,这些路轨将全自动界定规格,因此会依据它里边的內容更改规格。

能够在隐式网格选用 grid-auto-rows 和 grid-auto-columns 特性来界定1个设定尺寸规格的路轨。

在下面的事例中大家用 grid-auto-rows 特性来保证在隐式网格中建立的路轨是200像素高。

    .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 200px;
    }

minmax()

在设定1个显式的网格或界定全自动建立的行和列的尺寸的情况下,大家或许想给网格1个最少的规格,但要保证她们能扩张到容下他里边加上的內容。举个事例,我想让我的行的高宽比始终不容易变小到100像素下列,可是假如我的內容拓宽到300像素高了我想让我的行高也拓宽到这个高宽比。

网格用minmax()涵数来处理这个难题。在下1个事例中我用minmax()做为grid-auto-rows的值。全自动建立的行高可能是最少100像素,最大为auto。用auto代表着行的规格可能依据內容的尺寸来全自动转换:依据本行中最高的模块,把室内空间拓展到充足容下该模块。

    .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100px, auto);
    }
<div class="wrapper">
    <div class="box">One</div>
    <div class="box">Two
        <p>I have some more content in.</p>
        <p>This makes me taller than 100 pixels.</p>
    </div>
    <div class="box">Three</div>
    <div class="box">Four</div>
    <div class="box">Five</div>
</div>

跨路轨置放网格新项目

以下有4条纵向的网格线和3条横向的网格线:

应用了grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 特性,把前两个元素放到了大家的3列网格中。从左至右,第1个元素从列线1刚开始,拓宽至列线4,也便是大家这个事例中最右侧的列线。并从行线1拓宽到行线3,占有了两个行路轨。

第2个元素从列线1刚开始,拓宽了1个路轨。由于这是默认设置个人行为,因此我无需特定完毕线。而且它从行线3到行线5,超越了两个行路轨。剩余的元素会把自身安置到网格空闲的室内空间中。

   .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 100px;
    }
    .box1 {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
    }
    .box2 {
        grid-column-start: 1;
        grid-row-start: 3;
        grid-row-end: 5;
    }

网格间隔

在两个网格模块之间的 网格横向间隔 或 网格纵向间隔可以使用 grid-column-gap 和 grid-row-gap 特性来建立,或立即应用两个合拼的缩写方式 grid-gap。在下面的事例中,我会建立1个横向间隔为10px、纵向间隔为1em的网格元素。

嵌套循环网格

1个网格新项目能够同样成为1个网格器皿。在接下来的事例中我事前有了1个3列的网格元素,并有两个跨路轨的网格。在这个事例中,第1个网格新项目含有几个子级新项目。当这些新项目并不是网格器皿的立即子级元素时,它们不容易参加到网格合理布局中,并显示信息为一切正常的文本文档流。

html:

    <div class="wrapper">
        <div class="box box1">
            <div class="nested">a</div>
            <div class="nested">b</div>
            <div class="nested">c</div>
        </div>
        <div class="box box2">Two</div>
        <div class="box box3">Three</div>
        <div class="box box4">Four</div>
        <div class="box box5">Five</div>
    </div>

css: 

   .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    
    .wrapper {
        border: 2px solid #f76707;
        border-radius: 5px;
        background-color: #fff4e6;
    }
    .box1 {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
    }
    .box2 {
        grid-column-start: 1;
        grid-row-start: 3;
        grid-row-end: 5;
    }
    .box {
        border: 2px solid #FDC180;
        background: #FFD7A4;
        padding: 10px;
        color: #FB2E10;
    }
    .nested {
        border: 2px solid #FFF1A2;
        background: #FFFAD9;
    }

假如我把 box1 设定成 display: grid 我能够给它界定路轨随后它也会变为1个网格元素,它的子级元素也会排序在这个新网格元素中。

    .box1 {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。