CSS Grid網格佈局是什麼

藏色散人原創: 2018-11-12 17:31:136551瀏覽

本篇文章主要介紹CSS Grid佈局即網格佈局的基礎知識。

推薦參考學習：《CSS教學》

對於前端的初學者來說，CSS Grid佈局的概念可能有點陌生。其實也是非常容易理解的。我們都知道css是佈局網頁樣式的，通常都要考慮到網頁相容、盒子浮動、定位等hack實現問題，而css Grid佈局也就是css 網格佈局，是首個特地為解決這種問題而創造出來的模組。

簡單地說，CSS Grid佈局就是一個二維的基於網格的佈局系統，它可以同時處理列（Columns）和行（rows），目標是改變我們基於網格設計的使用者介面方式。

下面我們就透過簡單的Grid 佈局範例給大家介紹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 Grid網格佈局是什麼

上述程式碼中，我們給指定的容器設定

display:grid屬性表示開始使用Grid佈局，也就是將元素定義為網格容器，並設定列（grid-template-columns）和行（grid-template-rows）的大小，然後按grid-column和grid-row把子元素放進容器中。

重要屬性介紹：

grid-template-rows 屬性是基於網格行的維度，定義網格線的名稱和網格軌道的尺寸大小。

grid-template-columns 屬性是基於網格列的維度，定義網格線的名稱和網格軌道的尺寸大小。

Grid-column-start 屬性指定網格項目在網格列中的開始位置，方法是為其網格位置貢獻一行、一個跨度或自動。此起始位置定義網格區域的區塊起始邊緣。

Grid-column-end 屬性透過向網格放置貢獻線、跨度或無（自動）來指定網格項目在網格列中的結束位置，從而指定其網格區域的區塊結束邊緣。

本篇文章就是關於

CSS Grid網格佈局的簡單基礎知識介紹，具有一定的參考價值，希望對需要的朋友有所幫助！

以上是CSS Grid網格佈局是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css如何實現單邊陰影效果下一篇：css如何實現單邊陰影效果

看更多