位置: IT常识 - 正文

grid 栅格/网格布局学习笔记(栅格布局实现)

编辑:rootadmin
grid 栅格/网格布局学习笔记 1、前言

推荐整理分享grid 栅格/网格布局学习笔记(栅格布局实现),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:grid布局显示网格线,网格布局和栅格布局有什么不同,栅格网络,grid网格布局,栅格网络,grids网格设计,grids网格设计,grid网格布局,内容如对您有帮助,希望把文章链接给更多的朋友!

         栅格布局或者说网格布局是很好用的东西,像一些商城类的排版就很适合用栅格布局,但是存在一定的兼容性问题,兼容性暂时还没有研究,这边学习总结是针对grid也就是栅格布局的使用的学习总结,下面将介绍我认为的常用的几个属性,如果想要更详细的学习,可以参考阮一峰老师的grid布局

2、使用

首先是html

<template><div class="grid-box"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div></div></template>

然后使用grid 布局列与行的列数行数都是根据需求来设置的,可以更改,更详细的可以搜阮一峰老师的grid布局查看,在本文首页有链接

.grid-box { // 栅格布局三行三列 display: grid; // 3是多少行列 后面 100px是列宽,行的设置同理 grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); .grid-item { font-size: 50px; display: flex; justify-content: center; align-items: center; user-select: none; background: rgb(239,52,41); &:nth-child(2){ background: rgb(246,143,37); } &:nth-child(3){ background: rgb(75,168,70); } &:nth-child(4){ background: rgb(4,118,194); } &:nth-child(5){ background: rgb(192,119,175); } &:nth-child(6){ background: rgb(248,210,157); } &:nth-child(7){ background: rgb(180,168,127); } &:nth-child(8){ background: rgb(208,228,168); } &:nth-child(9){ background: rgb(77,199,236); } }}

救会出现这样的效果了

如果想要好看点可以给父容器(.grid-box)加上一点内边距与阴影

padding: 10px;box-shadow: 0 0 10px #999;

然后就得到了这样效果

此时我么可能会有让各个数字有间隙的需求,此时就可以用上下面两个属性了,也是在父容器设置的

// 行列间距column-gap: 10px;row-gap: 10px;

然后效果就是这样的

 

  此时我们克呢该有会有这样的需求,就是按列排,而不是像上面按行排列,此时就需要使用到

// 默认是按先行后列的,现在也可以改为先列后行 默认值是 row grid-auto-flow: column;grid 栅格/网格布局学习笔记(栅格布局实现)

然后效果就是这样的

以上内容的完整代码如下

<template><div class="grid-box"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div></div></template><script setup lang='ts'></script><style scoped lang="scss">.grid-box { // 栅格布局三行三列 display: grid; // 3是多少行列 后面 100px是列宽,行的设置同理 grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); // 行列间距 column-gap: 10px; row-gap: 10px; padding: 10px; box-shadow: 0 0 10px #999; // 默认是按先行后列的,现在也可以改为先列后行 grid-auto-flow: column; .grid-item { font-size: 50px; display: flex; justify-content: center; align-items: center; user-select: none; background: rgb(239,52,41); &:nth-child(2){ background: rgb(246,143,37); } &:nth-child(3){ background: rgb(75,168,70); } &:nth-child(4){ background: rgb(4,118,194); } &:nth-child(5){ background: rgb(192,119,175); } &:nth-child(6){ background: rgb(248,210,157); } &:nth-child(7){ background: rgb(180,168,127); } &:nth-child(8){ background: rgb(208,228,168); } &:nth-child(9){ background: rgb(77,199,236); } }}</style>

 假如每个单元格里面各自有内容,可以是使用以下链各个属性进行布局,它们的值可以是

// 设置单元格的布局,但是这两个属性设置后会减该内容压缩,所以使用的时候要注意// 他么可以取的值是 start | end | center | stretch justify-items: center;align-items: center;

效果是这样的

  

 还可以设置整体内容的排版

// 设置容器内整体内容的排版// 可取的值为 start | end | center | stretch | space-around | space-between | space-evenly;justify-content: center;align-content: center;

效果

 以上就是我认为常用的容器的属性,解释一下容器与项目(容器内的第一层子元素(项目里面的元素不是项目))在这里其实就是

.grid-box与.grid-item

3、项目属性

 这里值写四个属性,其实不止,只不过作者是我认为常用的属性

grid-column-start属性:左边框所在的垂直网格线grid-column-end属性:右边框所在的垂直网格线grid-row-start属性:上边框所在的水平网格线grid-row-end属性:下边框所在的水平网格线// 设置单元格的内容样式grid-column-start: 2;grid-column-end: 4;grid-row-start: 1;grid-row-end: 3;

效果

代码:

<template><div class="grid-box"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div></div></template><script setup lang='ts'></script><style scoped lang="scss">.grid-box { // 栅格布局三行三列 height: 100%; display: grid; // 3是多少行列 后面 100px是列宽,行的设置同理 grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); // 行列间距 column-gap: 10px; row-gap: 10px; padding: 10px; box-shadow: 0 0 10px #999; // 默认是按先行后列的,现在也可以改为先列后行()colunm) grid-auto-flow: row; // 设置单元格的布局,但是这两个属性设置后会减该内容压缩,所以使用的时候要注意 // justify-items: center; // align-items: center; // 设置容器内整体内容的排版 justify-content: center; align-content: center; .grid-item { font-size: 50px; display: flex; justify-content: center; align-items: center; user-select: none; background: rgb(239,52,41); &:nth-child(1) { // 设置单元格的内容样式 grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } &:nth-child(2){ background: rgb(246,143,37); } &:nth-child(3){ background: rgb(75,168,70); } &:nth-child(4){ background: rgb(4,118,194); } &:nth-child(5){ background: rgb(192,119,175); } &:nth-child(6){ background: rgb(248,210,157); } &:nth-child(7){ background: rgb(180,168,127); } &:nth-child(8){ background: rgb(208,228,168); } &:nth-child(9){ background: rgb(77,199,236); } }}</style>

这是一个组件内容,需要在app.vue中引入使用

以上就是我对grid学习的笔记总结,欢迎批评指正,交流学习 

本文链接地址:https://www.jiuchutong.com/zhishi/288135.html 转载请保留说明!

上一篇:录屏软件哪个好用?10个免费好用的「录屏软件」推荐(主播录屏软件哪个好)

下一篇:元宇宙 代价高昂的失败(元宇宙band)

  • 企业所得税法允许税前扣除的费用划分为
  • 资本公积怎么核实
  • 装修收入如何填报增值税表
  • 股东退股如何清算表格
  • 物料耗用
  • 收到以前年度的政府补助会计分录
  • 财务费用最后怎么结转
  • 小企业以前年度损益调整科目取消了吗
  • 外贸企业申报出口退税时的会计分录
  • 特殊贸易区域怎样选择
  • 平销返利企业所得税处理
  • 计提递延所得税资产
  • 营改增后企业出售使用过的旧车
  • 租入生物性资产如何入账
  • 税收楔子是什么意思
  • 免税发票备注栏
  • 关于国际货运代理协会联合会的描述不正确的是
  • 普票冲红可以部分冲红吗
  • 单利和复利的计算区别
  • 机票退票费能抵扣旅客进项税吗
  • 二手房产增值税率
  • 交强险 收费
  • 工程施工属于什么会计科目
  • 零星工程实施流程
  • 以现金收回已核销的不良贷款分录?
  • 垃圾费随水费征收
  • 房地产转让的条件
  • 增值税报表上期留底税额填不上
  • 增值税的滞纳金怎么做账
  • php经典教程
  • PHP 中 Orientation 属性判断上传图片是否需要旋转
  • 计提摊销的分录
  • 哪些费用可以在开办费中列支
  • vuecdn方式引入
  • vue数据表
  • php正则匹配网址
  • sscom命令
  • 房产税计入管理费用还是营业税金及附加
  • dedecms仿站如何做
  • 加油充值预付卡怎么做账
  • 汇票贴现是什么
  • 2021年废铁回收
  • 出口退税帐务处理
  • 无形资产的税费需要累计摊销吗
  • 固定资产清理主动
  • 简易计税方法缴纳城建税和教育税
  • 研发支出全部资本化能不能评高企
  • 旅客运送的一般规定
  • 注册工贸公司要多少资金
  • 残保金计算公式2023年
  • 记账凭证的基本要素包括哪些
  • win7系统旗舰版和纯净版的区别
  • 在windows中下列叙述正确的是什么
  • windows正版光盘
  • wav文件属于什么文件
  • 回收站清空文件怎么恢复?试试这三个方法找回!
  • 苹果mac双系统怎么删除
  • win7自带的软件
  • macbookair登陆
  • win10右下角功能列表不见了
  • linux系统怎么弄
  • win10系统怎么关闭病毒防护
  • es6 文档
  • js设计模式书
  • Node.js中的核心模块包括哪些内容?
  • Unity3D事件函数的执行顺序
  • 用python画一棵树
  • LinearLayout layout_weight解析
  • js进行表单验证的目的是什么
  • 安卓怎么记录时间
  • js跨域访问页面控件
  • 河南省地方税务局房产税管理办法
  • 广东国家税务局电子税务局官网入口
  • 环保税按次申报需要交滞纳金吗
  • 金银首饰以旧换新业务按销售方实际
  • 中科院有多少在校研究生
  • 内蒙古一般纳税人查询网
  • 加拿大鹅海关被税交多少
  • 税务稽查工作底稿属于什么证据
  • 山东税务自然人注册怎么回事
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设