返回頂部

一縷半夏微光

溫柔半兩，從容一生

公告

Grid布局（HTML）

在學習CSS的時候，遇到了一個問題就是，沒有看懂Grid布局，所以，這篇文章是用來詳細描述Grid布局的。

一、Grid布局的定義

Grid布局將容器劃分成"行"和"列"，產生單元格，然后指定"項目所在"的單元格，可以看作是二維布局。

二、示例

首先我先寫了九個div，body代碼如下：

<div id="main">
        <div id="a">a</div>
        <div id="b">b</div>
        <div id="c">c</div>
        <div id="d">d</div>
        <div id="e">e</div>
        <div id="f">f</div>
        <div id="g">g</div>
        <div id="h">h</div>
        <div id="i">i</div>
</div>

style代碼如下：

<style>
        #a{
            background-color: blue;
        }

        #b{
            background-color: blueviolet;
        }

        #c{
            background-color: chartreuse;
        }

        #d{
            background-color: chocolate;
        }

        #e{
            background-color: crimson;
        }

        #f{
            background-color: darkgreen;
        }

        #g{
            background-color: darksalmon;
        }

        #h{
            background-color: deeppink;
        }

        #i{
            background-color: gold;
        }
    </style>

效果如下：

下面就開始來使用grid布局

給<div id="main"></div>加上樣式后

#main{
            display: grid;
            /* 三行三列:每行高度200px 每列寬度200px */
            grid-template-rows: 200px 200px 200px;
            grid-template-columns:  200px 200px 200px;
        }

效果如下：

#main{
            display: grid;
            /* 三行三列:每行高度200px 每列寬度200px */
            grid-template-rows: 200px 200px 200px;
            grid-template-columns:  200px 200px 200px;
            /* 網格中所有單元格中的內容在X軸的對齊方式 */
            justify-items:center;
            /* 網格中所有單元格中的內容在Y軸的對齊方式 */
            align-items:center;
        }

所以其實其余的一些比如間距之類的就不一一示范了。

三、總結：

其實Grid布局，相比于Flex布局而言，更加的方便，因為Grid是二維的，而Flex是一維的，在Gird布局中，就用如上的九宮格打個比方就是，可以在九個不同的div中放置不同的內容，非常的方便快捷！

posted on 2022-07-26 16:25 一縷半夏微光閱讀(2402) 評論(0) 收藏舉報

刷新頁面返回頂部

一縷半夏微光

導航

公告

Grid布局（HTML）