位置: 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)

  • r9000p键盘灯怎么调(r9000p键盘灯怎么设置彩色)

    r9000p键盘灯怎么调(r9000p键盘灯怎么设置彩色)

  • 快手草稿作品怎么保存到相册(快手草稿作品怎么删除)

    快手草稿作品怎么保存到相册(快手草稿作品怎么删除)

  • 小米10至尊纪念版的支持多少倍变焦(小米10至尊纪念版参数配置)

    小米10至尊纪念版的支持多少倍变焦(小米10至尊纪念版参数配置)

  • 抖音为啥会被限流(抖音为啥会被限制发信息给别人)

    抖音为啥会被限流(抖音为啥会被限制发信息给别人)

  • iphone11和iphone11max区别(iphone11和iphone11max哪个好)

    iphone11和iphone11max区别(iphone11和iphone11max哪个好)

  • 华为屏幕右移了怎么复原(华为屏幕桌面偏右)

    华为屏幕右移了怎么复原(华为屏幕桌面偏右)

  • 怎么让b站亮度跟随系统(怎么让b站亮度变亮)

    怎么让b站亮度跟随系统(怎么让b站亮度变亮)

  • 联想笔记本不显示wifi列表(联想笔记本不显示WLAN)

    联想笔记本不显示wifi列表(联想笔记本不显示WLAN)

  • glk一al00华为什么型号(华为glk aloo)

    glk一al00华为什么型号(华为glk aloo)

  • 聊天记录迁移能看到删掉的信息吗(聊天记录迁移能看到对方的聊天记录吗)

    聊天记录迁移能看到删掉的信息吗(聊天记录迁移能看到对方的聊天记录吗)

  • 微信浮窗不见了怎么办(微信浮窗不见了怎么找出来)

    微信浮窗不见了怎么办(微信浮窗不见了怎么找出来)

  • 屏幕和手机分离怎么办(屏幕和手机分离修要多少钱)

    屏幕和手机分离怎么办(屏幕和手机分离修要多少钱)

  • 笔记本电脑的风扇可以关闭吗(笔记本电脑的风扇怎么关)

    笔记本电脑的风扇可以关闭吗(笔记本电脑的风扇怎么关)

  • 电脑选择快捷键是什么(电脑选择快捷键部分选择)

    电脑选择快捷键是什么(电脑选择快捷键部分选择)

  • 苹果11自动调节亮度怎么关闭(苹果11自动调节亮度不管用)

    苹果11自动调节亮度怎么关闭(苹果11自动调节亮度不管用)

  • 华为手机的语音助手叫什么(华为手机的语音助手叫什么 唤醒)

    华为手机的语音助手叫什么(华为手机的语音助手叫什么 唤醒)

  • 安卓手机微信夜间模式怎么关闭(安卓手机微信有夜间模式吗)

    安卓手机微信夜间模式怎么关闭(安卓手机微信有夜间模式吗)

  • 快手账号封禁也没有显示时间咋回事(快手账号封禁也会限流吗)

    快手账号封禁也没有显示时间咋回事(快手账号封禁也会限流吗)

  • 小米8青春版有没有快充(小米8青春版有没有红外线功能)

    小米8青春版有没有快充(小米8青春版有没有红外线功能)

  • 三星s10相机怎么开水印(三星s10相机怎么显示时间)

    三星s10相机怎么开水印(三星s10相机怎么显示时间)

  • oppo手机安装包在哪里(oppo手机安装包与系统不兼容)

    oppo手机安装包在哪里(oppo手机安装包与系统不兼容)

  • 苹果怎么使用nfc(苹果怎么使用NFC添加门禁卡)

    苹果怎么使用nfc(苹果怎么使用NFC添加门禁卡)

  • 芒果tv绑定的手机号不用了怎么办(芒果tv绑定的手机号不用了登录不上)

    芒果tv绑定的手机号不用了怎么办(芒果tv绑定的手机号不用了登录不上)

  • 如何在Windows10中自动切换到最强WiFi(如何在Windows10中打开命令提示符?)

    如何在Windows10中自动切换到最强WiFi(如何在Windows10中打开命令提示符?)

  • 小狐狸ChatGPT付费创作系统1.8.3独立版 + H5端 + 小程序前端安装测试教程(小狐狸k)

    小狐狸ChatGPT付费创作系统1.8.3独立版 + H5端 + 小程序前端安装测试教程(小狐狸k)

  • 最早的笔记本是什么(最早的笔记本是512m内存)

    最早的笔记本是什么(最早的笔记本是512m内存)

  • groupmod命令  更改群组属性(groupinfo命令)

    groupmod命令 更改群组属性(groupinfo命令)

  • 增值税的专用发票含税吗
  • 过头税产生的根源
  • 计提坏账部分收入怎么算
  • 收到银行承兑汇票怎么接收
  • 技术服务费怎么算成本
  • 签三方协议需要什么资料
  • 会计凭证审核的主要内容
  • 小规模一季度不超过45万
  • 远期采购合同会查吗
  • 会计录入凭证怎么录入
  • 公司年会聚餐的简短讲话
  • 收到别的公司的转账支票
  • 收到施工方给红包怎样处理
  • 车船税没有发票吗?
  • 政策减免是什么意思
  • 土地罚款可以计入成本吗?
  • 公司转账给公司会计分录
  • 房地产营改增后开票
  • 年底结转损益是什么意思
  • 采购合同安装服务费审价规定
  • 刷银行卡消费安全吗
  • 外贸企业运输费用占总成本比例
  • 充电话费送的
  • 所得税申报表中的营业成本包括费用吗
  • 微信支付宝余额为零的表情包
  • 餐饮企业原材料的核算,新城饭店为增值税一般纳税人
  • 处理废料的会计分录
  • 确认收入的必要条件
  • 向股东借款支付利息划算还是做工资划算
  • 企业员工的工资设定标准
  • 股东借款产生的利息可以税前扣除吗
  • 残疾人就业保障金计入什么科目
  • 元素鼠标失灵了怎么办
  • 脱不下孔乙己的长衫对应下一句
  • dns域名解析两种方式
  • 员工报销医药费的会计分录
  • 如何在最新版本钉钉上使用支付审申请
  • 公司搞研发是什么意思
  • 小企业会计准则没有以前年度损益调整科目
  • 没有交过税怎么办
  • 公司电脑配件也要交税吗
  • 2.MyBatis
  • 个税由公司承担怎么计算工资
  • 账务核对的主要内容
  • 补提去年企业所得税会计分录
  • sql 文件存储
  • 调整以前年度少计收入
  • 专票不小心印上划痕
  • 一年发一次工资好不好
  • 发票金额与付款金额不一致情况说明
  • 企业购进的固定资产
  • 不动产租赁属于什么税目
  • 投资款项是什么意思
  • 本年利润月末怎么处理
  • 账务核对包括账表核对吗
  • 怎么开劳务派遣工作证明
  • 松散索引和紧凑索引
  • sql根据逗号分割数据
  • 无法启动diagnostic policy service服务
  • Windows XP with SP2/SP3 原版下载汇总
  • 苹果mac升级系统
  • explorer.exe进程文件
  • windows的安装
  • spkrmon.exe - spkrmon是什么进程
  • intel的me
  • ubuntu如何安装wps
  • 批处理程序
  • em和px
  • cocos2dx怎么用
  • Node.js中的事件循环是什么意思
  • javascript函数自调用
  • 飞机大战剧情102
  • Android Adapter 源码笔记(3)
  • jquery使用css
  • Python性能优化指南
  • jquery库有哪些
  • xmpp client
  • 查账征收个人经营所得税怎么申报
  • 网约车考试全国过了区域没过
  • 开电子发票流程步骤
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设