css網(wǎng)格布局的常用屬性是什么

小編給大家分享一下css網(wǎng)格布局的常用屬性是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專業(yè)領(lǐng)域包括成都網(wǎng)站建設(shè)、網(wǎng)站制作、商城網(wǎng)站定制開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)， 與其他網(wǎng)站設(shè)計及系統(tǒng)開發(fā)公司不同，創(chuàng)新互聯(lián)的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。

和flex布局不同的是，網(wǎng)格布局（grid）是一個二維的布局，可以創(chuàng)建任意行列的布局。

首先來介紹幾個概念;

想象一個三行三列的布局，網(wǎng)格線就是構(gòu)成網(wǎng)格所有的線條，三行三列的布局每行就會有4條網(wǎng)格線。

網(wǎng)格軌道就是相鄰兩條平行的網(wǎng)格線之間的部分。

和flex布局一樣，他會有父容器和子項目，在這兒我們稱為網(wǎng)格容器和網(wǎng)格項。

接下來，我們從網(wǎng)格容器到網(wǎng)格項的各個基本屬性來介紹網(wǎng)格布局。

網(wǎng)格容器

網(wǎng)格容器是決定將網(wǎng)格分為幾行幾列，所以首先實現(xiàn)網(wǎng)格布局就要使該容器具有以下幾個屬性：

display: grid;

grid-template-columns

grid-template-rows

grid-gap

grid-template-areas

grid-auto-flow: dense | row(default) | column

justify-items: start|end|center|stretch(default)

align-items:

start|end|center|stretch(default)

grid-auto-columns:

網(wǎng)格布局的父容器基本屬性就是以上幾個。

• display：grid

表示為網(wǎng)格布局，和flex布局中的display：flex意義相同，同樣該屬性還可以取值：inline-grid和subgrid

• grid-template-columns

創(chuàng)建網(wǎng)格的列數(shù)，除了百分比的形式之外，還支持各種單位的組合形式，比如 grid-template-columns: 100px 20% 1em 1vw 20%;

但是有個repeate函數(shù)可以簡化相同的值，比如grid-template-columns: repeat（5， 20%）表示5個20%的寬度，和例子中的意義完全相同。

fr用于等分剩余空間，它的大小是將該屬性上的所有可計算的值（包括各種單位，百分比）除去后，剩余空間的大小。

推薦使用fr。它也會自動計算除了grid-gap之外其余的部分。

如 grid-template-columns：100px 1fr 2fr repeat(2, 20%)。同樣的5列布局，其中的 1fr 表示寬度為總寬度減去左邊的100px和右側(cè)兩列的20%之后剩余的部分除以三。即第二列的寬度是將會是第三列的一半。

• grid-template-rows

屬性值和grid-template-columns的屬性值完全一樣。

• grid-template

是grid-template-rows和grid-template-columns的縮寫形式，屬性值的寫法為

grid-template: 1fr 50px/1fr 4fr; //為行數(shù)/列數(shù)的形式，

該代碼表示兩行兩列的布局，第一行的高度為底行的50px確定之后剩下的高度。第一列的寬度為將該容器分為五等分，第一列占據(jù)一份，第二列占據(jù)四份。

• grid-gap

可以取一或兩個值，表示行列之間的間隙。

• grid-template-areas

通過引用 grid-area 屬性指定的 網(wǎng)格區(qū)域(Grid Area) 名稱來定義網(wǎng)格模板。重復網(wǎng)格區(qū)域的名稱導致內(nèi)容跨越這些單元格。一個點號（.）代表一個空的網(wǎng)格單元。這個語法本身可視作網(wǎng)格的可視化結(jié)構(gòu)。

• grid-template-areas:

“header header header header”

“main main . sidebar”

“footer footer footer footer”;

• grid-auto-flow:

• row：告訴自動布局算法依次填充每行，根據(jù)需要添加新行

• column：告訴自動布局算法依次填入每列，根據(jù)需要添加新列

• dense：告訴自動布局算法在稍后出現(xiàn)較小的網(wǎng)格項時，嘗試填充網(wǎng)格中較早的空缺

• justify-items

沿著 行軸線(row axis) 對齊 網(wǎng)格項(grid items) 內(nèi)的內(nèi)容

• align-items

沿著 列軸線(row axis) 對齊 網(wǎng)格項(grid items) 內(nèi)的內(nèi)容

• grid-auto-columns:

隱式網(wǎng)格的寬度

• grid-auto-rows:

隱式網(wǎng)格的高度

網(wǎng)格項

網(wǎng)格項表示網(wǎng)格內(nèi)部的直接子元素，不包括子元素的子元素。

常用屬性：

• grid-column-start: 列網(wǎng)格線 開始，

• grid-column-end: 列網(wǎng)格線 結(jié)束

• grid-column: start/end | start/span count

• order: 與z-index的屬性相同，表示層疊的位置。

• grid-area: 網(wǎng)格名，在使用grid-template-areas時比較有用。

• justify-self: 單個網(wǎng)格項在行軸線的對齊方式

• align-self: 單個網(wǎng)格項在列軸線的對齊方式

<div class='container'>
        <div class='child'></div>
    </div>
    <style>
    .container {
        display: grid;
        width: 580px;
        height: 580px;
        grid-gap: 3px;
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: repeat(5, 1fr);
        background-color: blanchedalmond;
    }
    .child {
        grid-column-start: 6;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 5;
        background: url(./babar.png);
        background-size: 116px 116px;
        order：1；
    }

在審查元素的時候毫不意外的發(fā)現(xiàn)該布局為五行五列的布局，上述的child中前四行代碼屬性的值都是以網(wǎng)格線的順序為基準，前兩行代碼表示第六列網(wǎng)格線開始，到第三列網(wǎng)格線結(jié)束，即表示后三列。其中的start不一定要比end小。第三四行代碼表示第一個網(wǎng)格線開始，第五個網(wǎng)格線結(jié)束，即表示前四行，四行代碼綜合起來就如圖所示。

當然，child中的前四行代碼也可以簡寫成這樣：

grid-row: 1/ 5;

grid-column: 6/ 3;

或者

grid-row: 1/ span 4; // 橫向第一個網(wǎng)格線開始，以下的4個網(wǎng)格軌道

grid-column: 3/span 3; // 豎向第三條網(wǎng)格線開始，以后的3個網(wǎng)格軌道

甚至簡寫成這樣

grid-area: 1/3/ span 4/span 3;

以上是“css網(wǎng)格布局的常用屬性是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標題名稱：css網(wǎng)格布局的常用屬性是什么
當前鏈接：http://muchs.cn/article36/isgisg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、動態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計公司、搜索引擎優(yōu)化、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)