Grid布局（HTML） ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第1天

在昨天学习CSS的时候，所没有弄懂的就是Grid布局，故而决定今天自己手敲代码来对Grid布局进行相关的了解。

一、Grid布局的定义

Grid布局将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。这个“行”与“列”，可以看做是我们生活中的Excel表格一样，然后可以为其设置对应的行高，列宽等。

二、示例

首先我先写了九个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;
        }

所以其实其余的一些比如间距之类的就不一一示范了。

三、总结：

1. 其实Grid布局，相比于Flex布局而言，更加的方便，因为Grid是二维的，而Flex是一维的，在Gird布局中，就用如上的九宫格打个比方就是，可以在九个不同的div中放置不同的内容，非常的方便快捷！
2. 如果需要写一个项目，比如一个网上商城项目，这里用到Grid布局，不同的商品放置在不同的单元格中，然后一个类别的商品放置在一个大的div中进行包裹，其余类别的就类似于此类别商品一样，放置在不同的div中，从而达到可以让用户在一个页面里看到不同类别的商品，不仅可以方便用户，也可以让用户看到更多琳琅满目的商品。
3. 此篇笔记用于记录自己在HTML布局方面不懂的知识点，方便日后自己可以进行查阅！