CSS Grid網格佈局是什麼-css知識-PHP中文網

首頁

每日程式設計

css知識

CSS Grid網格佈局是什麼

藏色散人

Nov 12, 2018 pm 05:31 PM

本篇文章主要介紹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網格佈局是什麼