讯享网

<p><br /></p> <p> <br /></p> <h5 id="h0">目录</h5> <ul><li>&#x1f31f;前言</li><li>&#x1f31f;浏览器支持</li><li>&#x1f31f;Gird简介和基本概念</li><li>&#x1f31f;属性介绍</li></ul> <ul><li>&#x1f31f; 父元素上的属性</li></ul> <ul><li>&#x1f31f; 设置grid布局</li><li>&#x1f31f;设置网格的列数与行数</li><li>&#x1f31f;通过网格单元的名字来布局 grid-template-areas</li><li>&#x1f31f;设置网格轨道的大小</li><li>&#x1f31f;justify-items</li><li>&#x1f31f;align-items</li><li>&#x1f31f;justify-content</li><li>&#x1f31f;align-content</li><li>&#x1f31f;grid-auto-columns和grid-auto-rows</li><li>&#x1f31f;grid-auto-flow</li></ul> <ul><li>&#x1f31f;设置子元素上的属性</li></ul> <ul><li>&#x1f31f;grid-area</li><li>&#x1f31f;设置单个子元素在其所在的网格项中的排列方式</li></ul> <ul><li>&#x1f31f;写在最后</li></ul> <p> <br /></p> <p><br /></p> <p><strong>CSS一直用来布局网页&#xff0c;但一直都不完美。 一开始我们使用table 做布局&#xff0c;然后转向浮动、定位以及inline-block&#xff0c;但所有这些方法本质上都是 Hack 的方式&#xff0c;并且遗漏了很多重要的功能&#xff08;例如垂直居中&#xff09;。 Flexbox的出现在一定程度上解决了这个问题&#xff0c;但是它的目的是为了更简单的一维布局&#xff0c;而不是复杂的二维布局&#xff08;Flexbox和Grid实际上一起工作得很好&#xff09;。 只要我们一直在制作网站&#xff0c;我们就一直在为解决布局问题不断探索&#xff0c; 而Grid是第一个专门为解决布局问题而生的CSS模块。</strong></p> <div style="width:100%;overflow-y:auto"> </div> <p style="text-align:center;"><img src="https://i-blog.csdnimg.cn/blog_migrate/450d502fbfbd6b6dd3fab96ea6650f7c.png" alt="前端页面布局之【Grid布局】详解_竖线" title="在这里插入图片描述" style="width: 1156px; visibility: visible;" /></p> <ul><li><strong>grid布局又称CSS网格布局&#xff0c;&#xff08;又名“网格”&#xff09;是一个二维的基于网格的布局系统&#xff0c;其目的只在于完全改变我们设计基于网格的用户界面的方式。</strong></li><li><strong>grid中的一些概念&#xff1a;</strong></li></ul> <ul><li>网格容器&#xff08;Grid Container&#xff09;元素应用display:grid&#xff0c;它是其所有网格项的父元素。</li><li>网格项&#xff08;Grid Item&#xff09;网格容器的直接子元素</li><li>网格线&#xff08;Grid Line&#xff09;组成网格线的分界线。它们可以是列网格线&#xff08;column grid lines&#xff09;&#xff0c;也可以是行网格线&#xff08;row grid lines&#xff09;并居于行或列的任意一侧</li><li>网格轨道&#xff08;Grid Track&#xff09;两个相邻的网格线之间为网格轨道。</li><li>网格单元&#xff08;Grid Cell&#xff09;两个相邻的列网格线和两个相邻的行网格线组成的是网格单元&#xff0c;它是最小的网格单元。</li><li>网格区&#xff08;Grid Area&#xff09;网格区是由任意数量网格单元组成</li></ul> <ul><li><strong>grid目前兼容性目前还可以&#xff0c;主流浏览器对它的支持力度很大&#xff0c;ie10 11宣布它未来不久会对它有很好的支持&#xff0c;目前则需要使用过时的语法。 所以grid布局目前常用于移动端布局</strong></li></ul> <h4 id="h5">&#x1f31f; 父元素上的属性</h4> <div style="width:100%;overflow-y:auto"> </div> <h5 id="h6">&#x1f31f; 设置grid布局</h5> <div> </div> <div style="width:100%;overflow-y:auto"> </div> <h5 id="h7">&#x1f31f;设置网格的列数与行数</h5> <ol><li>grid-template-columns 它表示的是设置列数</li></ol> <div> </div> <ol start="2"><li>grid-template-rows 与grid-template-columns的使用方法相同 设置网格项的行数</li></ol> <div> </div> <ol start="3"><li>简单例子</li></ol> <div> </div> <p style="text-align:center;"><img src="https://i-blog.csdnimg.cn/blog_migrate/7ce9c9e8cf70144d37139a3284c75c94.png" alt="前端页面布局之【Grid布局】详解_竖线_02" title="在这里插入图片描述" style="width: 464px; visibility: visible;" /></p> <div> </div> <p style="text-align:center;"><img src="https://i-blog.csdnimg.cn/blog_migrate/d1ec30132a40608e066139f4dcd2f8d0.png" alt="前端页面布局之【Grid布局】详解_竖线_03" title="在这里插入图片描述" style="width: 514px; visibility: visible;" /></p> <h5 id="h8">&#x1f31f;通过网格单元的名字来布局 grid-template-areas</h5> <p><strong>使用这个属性的时候&#xff0c;需要先用子元素上的grid-area属性给子元素起一个名字&#xff0c;然后再配合这个属性来时使用</strong></p> <div> </div> <p style="text-align:center;"><img src="https://i-blog.csdnimg.cn/blog_migrate/85bae421aeed22a2a36af54446e0a781.png" alt="前端页面布局之【Grid布局】详解_属性值_04" title="在这里插入图片描述" style="width: 427px; visibility: visible;" /></p> <h5 id="h9">&#x1f31f;设置网格轨道的大小</h5> <ul><li>grid-column-gap和grid-row-gap 用来指定横竖网格轨道的大小 只在两个单元格之间产生间距&#xff0c;不再边缘产生</li><li>grid-gap grid-column-gap和grid-row-gap这两个属性的缩写方式</li></ul> <div> </div> <p style="text-align:center;"><img src="https://i-blog.csdnimg.cn/blog_migrate/d02bdddc366d8c0deb042e233c.png" alt="前端页面布局之【Grid布局】详解_竖线_05" title="在这里插入图片描述" style="width: 322px; visibility: visible;" /></p> <h5 id="h10">&#x1f31f;justify-items</h5> <p><strong>网格中所有单元格中的内容在网格项X轴的对齐方式 默认是占满宽度整个X轴</strong></p> <div style="width:100%;overflow-y:auto"> </div> <div> </div> <p style="text-align:center;"><img src="https://i-blog.csdnimg.cn/blog_migrate/8b00b7977efab1171e48d.png" alt="前端页面布局之【Grid布局】详解_默认值_06" title="在这里插入图片描述" style="width: 312px; visibility: visible;" /></p> <h5 id="h11">&#x1f31f;align-items</h5> <p><strong>网格中所有单元格中的内容在网格项Y轴的对齐方式 默认是占满宽度整个Y轴 它的值与justify-items相同</strong></p> <div style="width:100%;overflow-y:auto"> </div> <div> </div> <p style="text-align:center;"><img src="https://i-blog.csdnimg.cn/blog_migrate/64e2cbbc4a7c4f95d2acdc79.png" alt="前端页面布局之【Grid布局】详解_竖线_07" title="在这里插入图片描述" style="width: 312px; visibility: visible;" /></p> <h5 id="h12">&#x1f31f;justify-content</h5> <p><strong>如果我们使用PX这种固定大小的布局方式的时候&#xff0c;网格的大小可能小于网格容器的大小</strong></p> <blockquote style="margin-top: 5px; margin-bottom: 5px; padding-left: 1em; margin-left: 0px; border-left: 3px solid rgb(238, 238, 238); opacity: 0.6;"> <p>这个值是用来设置整个网格在网格容器中的X轴的排列方式</p> </blockquote> <div style="width:100%;overflow-y:auto"> </div> <div> </div> <p style="text-align:center;"><img src="https://i-blog.csdnimg.cn/blog_migrate/22b3fdb8db17e23baf5513e009.png" alt="前端页面布局之【Grid布局】详解_竖线_08" title="在这里插入图片描述" style="width: 387px; visibility: visible;" /></p> <div> </div> <p style="text-align:center;"><img src="https://i-blog.csdnimg.cn/blog_migrate/30355bd8998cbf154e9a84ad7f70ef3e.png" alt="前端页面布局之【Grid布局】详解_默认值_09" title="在这里插入图片描述" style="width: 387px; visibility: visible;" /></p> <h5 id="h13">&#x1f31f;align-content</h5> <p><strong>如果我们使用PX这种固定大小的布局方式的时候&#xff0c;网格的大小可能小于网格容器的大小</strong></p> <blockquote style="margin-top: 5px; margin-bottom: 5px; padding-left: 1em; margin-left: 0px; border-left: 3px solid rgb(238, 238, 238); opacity: 0.6;"> <p>这个值是用来设置整个网格在网格容器中的Y轴的排列方式</p> </blockquote> <div style="width:100%;overflow-y:auto"> </div> <div> </div> <p style="text-align:center;"><img src="https://i-blog.csdnimg.cn/blog_migrate/e4e02df6b1811bc300f0b864ca.png" alt="前端页面布局之【Grid布局】详解_默认值_10" title="在这里插入图片描述" style="width: 258px; visibility: visible;" /></p> <div> </div> <p style="text-align:center;"><img src="https://i-blog.csdnimg.cn/blog_migrate/b95ad5a4d2506ac36d7383efbb.png" alt="前端页面布局之【Grid布局】详解_竖线_11" title="在这里插入图片描述" style="width: 258px; visibility: visible;" /></p> <h5 id="h14">&#x1f31f;grid-auto-columns和grid-auto-rows</h5> <p><strong>设定隐藏的网格轨道的大小</strong></p> <blockquote style="margin-top: 5px; margin-bottom: 5px; padding-left: 1em; margin-left: 0px; border-left: 3px solid rgb(238, 238, 238); opacity: 0.6;"> <p>自动生成隐式网格轨道&#xff08;列和行&#xff09;&#xff0c;当你定位的网格项超出网格容器范围时&#xff0c;将自动创建隐式网格轨道。网格轨道大小,可以是固定值&#xff0c;百分比或者是分数&#xff08;fr单位&#xff09;。</p> </blockquote> <h5 id="h15">&#x1f31f;grid-auto-flow</h5> <p><strong>在布局是时候&#xff0c;选择网格填充的方法</strong></p> <blockquote style="margin-top: 5px; margin-bottom: 5px; padding-left: 1em; margin-left: 0px; border-left: 3px solid rgb(238, 238, 238); opacity: 0.6;"> <p>在没有设置网格项的位置时&#xff0c;这个属性控制网格项怎样排列。</p> </blockquote> <div style="width:100%;overflow-y:auto"> </div> <div> </div> <div> </div> <ol><li></li><li>设置grid-auto-flow&#xff1a;row&#xff0c;item-b、item-c和item-d在行上是从左到右排列</li><li><p style="text-align:center;"><img src="https://i-blog.csdnimg.cn/blog_migrate/6c43563ca00c55ae9e34f7fede20e547.png" alt="前端页面布局之【Grid布局】详解_前端_12" title="在这里插入图片描述" style="width: 371px; visibility: visible;" /></p> </li><li></li><li>设置grid-auto-flow&#xff1a;column;</li><li><p style="text-align:center;"><img src="https://i-blog.csdnimg.cn/blog_migrate/2de674ea4739bac8e3ec12b0d582f57f.png" alt="前端页面布局之【Grid布局】详解_默认值_13" title="在这里插入图片描述" style="width: 371px; visibility: visible;" /></p> </li><li>grid的简写方式和属性的顺序,设置网格容器所有属性。</li></ol> <blockquote style="margin-top: 5px; margin-bottom: 5px; padding-left: 1em; margin-left: 0px; border-left: 3px solid rgb(238, 238, 238); opacity: 0.6;"> <p>grid: none | grid-template-rows / grid-template-columns | grid-auto-flow [grid-auto-rows [ / grid-auto-columns] ];</p> </blockquote> <h4 id="h16">&#x1f31f;设置子元素上的属性</h4> <div style="width:100%;overflow-y:auto"> </div> <h5 id="h17">&#x1f31f;grid-area</h5> <p><strong>给单个子元素起名字</strong></p> <blockquote style="margin-top: 5px; margin-bottom: 5px; padding-left: 1em; margin-left: 0px; border-left: 3px solid rgb(238, 238, 238); opacity: 0.6;"> <p>这个属性就是配合父元素上的grid-template-areas属性来使用&#xff0c;grid-area就是给单个网格项起个名字</p> </blockquote> <p><strong>设置网格项位置的三种写法</strong></p> <ol><li>grid-column-start grid-column-end grid-row-start grid-row-end</li></ol> <div> </div> <ol start="2"><li>grid-column grid-row</li></ol> <div> </div> <ol start="3"><li>grid-area grid-column和grid-row的缩写</li></ol> <div> </div> <div> </div> <p style="text-align:center;"><img src="https://i-blog.csdnimg.cn/blog_migrate/17004b20779c3b9eeefc4bc764c54e12.png" alt="前端页面布局之【Grid布局】详解_竖线_14" title="在这里插入图片描述" style="width: 514px; visibility: visible;" /></p> <h5 id="h18">&#x1f31f;设置单个子元素在其所在的网格项中的排列方式</h5> <ol><li>justify-self 用来设置单个元素在单个网格项中X轴的布局</li></ol> <div style="width:100%;overflow-y:auto"> </div> <ol start="2"><li>align-self 与justify-self:;类似&#xff0c;用来设置单个元素在单个网格中Y轴的布局方式&#xff0c;和justify-self有4个相同的值</li></ol> <div style="width:100%;overflow-y:auto"> </div> <p><strong>更多前端知识请大家持续关注&#xff0c;尽请期待。各位小伙伴让我们 let’s be prepared at all times&#xff01;</strong></p> <blockquote style="margin-top: 5px; margin-bottom: 5px; padding-left: 1em; margin-left: 0px; border-left: 3px solid rgb(238, 238, 238); opacity: 0.6;"> <p><strong>✨原创不易&#xff0c;还希望各位大佬支持一下&#xff01;</strong><br /><strong>&#x1f44d; 点赞&#xff0c;你的认可是我创作的动力&#xff01;</strong><br /><strong>⭐️ 收藏&#xff0c;你的青睐是我努力的方向&#xff01;</strong><br /><strong>✏️ 评论&#xff0c;你的意见是我进步的财富&#xff01;</strong></p> </blockquote> <p> <br /></p>