Grid隐式布局，对齐方式与行列间隙的使用方法

Grid 布局简介

grid布局即网格布局是一种二维布局，可以同时控制行和列的排布和对齐方式，grid布局由水平线和垂直线构成，两条水平线之间的区域叫做行轨道，两条垂直线的区域叫做列轨道。

隐式网格

通用代码块

<divclass=“container”><divclass=“item”>item1</div><divclass=“item”>item2</div><divclass=“item”>item3</div><divclass=“item”>item4</div><divclass=“item”>item5</div><divclass=“i源码下载wcqh.cntem”>item6</div><divclass=“item”>item7</div><divclass=“item”>item8</div><divclass=“item”>item9</div><divclass=“item other”>item10</div><divclass=“item other”>item11</div></div>

隐式网格代码细说

.container { width:300px; height:150px; display: grid;/* grid-template-columns:设置每一列的宽度，可以是具体值，也可以是百分比grid-template-rows:设源码下载wcqh.cn置每一行的宽度，可以是具体值，也可以是百分比 */ grid–template–columns: repeat(3,1fr); grid–template–rows: repeat(3,1fr);/* 1.项目排列规则 */ grid–auto–flow: row;/* grid-auto-flow: column; *//* 2.隐式网格 *//* 多余的项目，出现在隐式网格中(自动生成) */ grid–auto–rows:50px;}.container .item { background–color: antiquewhite;}.container .item.other { background–color:源码下载wcqh.cn violet;}/* 排列规则:gird-auto-flow:row/column 行优先/列优先隐式网格:grid-auto-row/column */

效果图展示

对齐方式

/* 1.对齐前提:必须存在”剩余空间” 2.对齐方案:”剩余空间”在”项目”之间的分配方式 3.剩余空间:flex(主轴，交叉轴),Grid(容器，单元格) Grid:剩余空间存在于”容器”或”单元格” */.container { display: grid; grid–template–columns: repeat(3,100px); grid–template–rows: repeat(3,100px);}.container .item {/源码下载wcqh.cn* border: 1px solid #000; */ background–color: wheat;/* width: 50px; height: 50px; */}/* 创建剩余空间 */.container { width:450px; height:450px; border:1px solid #000; background–color: lightblue;/* 1.项目在”容器”中的对齐 place-content:垂直方向水平方向默认值:垂直居中水平居左 */ place–content: start start;/* 垂直居中，水平居右 */ place–content: center end;/* 源码下载wcqh.cn2.项目在”单元格”中的对齐 *//* 单元格中必须要有剩余空间，即：项目 < 单元格 *//* place-items: 垂直方向水平方向; */ place–items: start; place–items: center end;}/* 3.设置某个项目在单元格对齐方式(与众不同) */.container .item:nth–child(5){ background–color: blueviolet; place–self:end;}

效果图展示

行列间隙

.container { display: grid; grid–template–columns: repeat(3,100px); grid–templat源码下载wcqh.cne–rows: repeat(3,100px);/* 行列间隙gap *//* gap: 垂直方向水平方向; */ gap:5px10px; gap:10px;}.container .item { background–color: wheat;/* 行列间隙 *//* margin *//* 要求5px的margin */ margin:5px;}

效果图展示

总结

grid 是一个 CSS 所有网格容器的简写属性，可以用来设置以下属性：显式网格属性： grid–template–rows、grid–template–columns 和 grid–template–areas。隐式网格属性： grid–auto–rows、源码下载wcqh.cngrid–auto–columns 和 grid–auto–flow。间距属性： grid–column–gap 和 grid–row–gap。

批改老师：

PHPz 批改状态：合格老师批语：整体效果可以,总结的也不错,继续加油

作者最新博文

小白安装与配置：chrome，vscode，phpenv

2022-10-14 01:07:35

1.如需技术支持联系QQ：1339833655 2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！ 4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！ 5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 6. 如有链接无法下载、失效或广告，请联系管理员处理！ 7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！ 8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！

THE END