如何做网站的逻辑结构图,网址生成,西部数码网站管理助手 ftp上传文件失败,广告策划方案万能模板网格布局之跨行越列
欢迎关注#xff1a;xssy5431 小拾岁月 参考链接#xff1a;https://mp.weixin.qq.com/s/xStfSmewncTW49N0Y_Vhow 点击查看
使用场景 在常见的页面布局中#xff0c;我们往往会遇到那种类似合并单元格的布局。比如#xff1a;成绩排名、产品排名等等…网格布局之跨行越列
欢迎关注xssy5431 小拾岁月 参考链接https://mp.weixin.qq.com/s/xStfSmewncTW49N0Y_Vhow 点击查看
使用场景 在常见的页面布局中我们往往会遇到那种类似合并单元格的布局。比如成绩排名、产品排名等等。在进行页面元素分析时第 1、2、3 名与其他名次没有区别只是页面对其的描述篇幅较多而已。此时使用网格布局中的跨行越列恰如其分。 示例代码
div classgrid-containerdiv classgrid-item item11/divdiv classgrid-item2/divdiv classgrid-item3/divdiv classgrid-item4/div
/div.grid-container {width: 800px;padding: 1px;display: grid;background-color: red;grid-template-rows: repeat(2, 100px);grid-template-columns: repeat(3, 1fr);
}.grid-item {background: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);font-size: 30px;text-align: center;line-height: 100px;border: 1px solid red;
}.item1 {grid-column-start: 1;grid-column-end: 4;
}关键代码
.item1 {grid-column-start: 1;grid-column-end: 4;
}页面布局
在未对 .item1 进行处理前布局如下 在对 .item1 进行处理后布局如下 温馨提示
更多博文请关注xssy5431 小拾岁月
