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

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置每一行的宽度,可以是具体值,也可以是百分比 */ gridtemplatecolumns: repeat(3,1fr); gridtemplaterows: repeat(3,1fr);/* 1.项目排列规则 */ gridautoflow: row;/* grid-auto-flow: column; *//* 2.隐式网格 *//* 多余的项目,出现在隐式网格中(自动生成) */ gridautorows:50px;}.container .item { backgroundcolor: antiquewhite;}.container .item.other { backgroundcolor:源码下载wcqh.cn violet;}/* 排列规则:gird-auto-flow:row/column 行优先/列优先 隐式网格:grid-auto-row/column */

效果图展示

对齐方式

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

效果图展示

行列间隙

.container { display: grid; gridtemplatecolumns: repeat(3,100px); gridtemplat源码下载wcqh.cnerows: repeat(3,100px);/* 行列间隙gap *//* gap: 垂直方向 水平方向; */ gap:5px10px; gap:10px;}.container .item { backgroundcolor: wheat;/* 行列间隙 *//* margin *//* 要求5px的margin */ margin:5px;}

效果图展示

总结

grid 是一个 CSS 所有网格容器的简写属性,可以用来设置以下属性:显式网格属性: gridtemplaterowsgridtemplatecolumns gridtemplateareas隐式网格属性: gridautorows源码下载wcqh.cngridautocolumns gridautoflow间距属性: gridcolumngap gridrowgap
批改老师:PHPz 批改状态:合格 老师批语:整体效果可以,总结的也不错,继续加油
作者最新博文
2022-10-14 01:07:35

© 版权声明
THE END
喜欢就支持一下吧
点赞31 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容