Grid布局（HTML）

2022-07-26 16:31:07 阅读：185 来源： 互联网

标签：color 布局 HTML Grid background grid 200px

在学习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中放置不同的内容，非常的方便快捷！

标签：color,布局,HTML,Grid,background,grid,200px
来源： https://www.cnblogs.com/miao-com/p/16521382.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Grid布局（HTML）