CSS grid布局相关笔记

最新推荐文章于 2023-03-16 08:25:58 发布
VIP文章 最新推荐文章于 2023-03-16 08:25:58 发布
阅读量87 收藏
点赞数
分类专栏： 前端 文章标签： CSS Grid布局 前端 网格布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36237810/article/details/110126544
版权
优势之处
  1. 固定或者弹性的轨道尺寸
    • 无论在水平方向还是竖直方向都能够做到自适应
  2. 定位项目
    • 每一个组件都能作为一个项目被定位到相应的位置上面去
  3. 创建额外的轨道来保存内容
  4. 对齐控制
    • 和Flexbox相似
  5. 控制重叠内容
    • 可以像z-index一样控制重叠
Grid VS Flexbox
  • Flexbox是一维布局，只能在一条直线上放置内容区块，Grid是一个二维布局，根据设计需求将内容块放置到任何地方
  • Flexbox可以和Grid很好的配合使用，页面整体使用Grid布局，局部使用Flexbox。
兼容性
  • Grid布局兼容性
相关概念

  1. 网格容器（Grid Container）和网格项（Grid Item）

    • 网格容器-所有网格项的父元素。元素应用display:grid;
    <!--html-->
最低0.47元/天 解锁文章
闰土月下追猹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用CSS Grid布局实现网格的流动
09-25
主要介绍了使用CSS Grid布局实现网格的流动,需要的朋友可以参考下
CSS-Grid网格布局笔记
学习，思考，输出
07-11 1401
显示网格：是指item在定义单元格范围内，比如一行三列的布局，若item在这布局中就是显示单元格，不在则为隐式单元格。前提是容器的子元素超过了网络布局定义范围，比如一行三列的布局，正常是三个元素，但隐式单元格就是超过了三个元素。单元格列数跟随容器宽度自适应，宽度最小不会小于100px，行数是一个隐式单元格属性，会自动适应容器大小。上面没有给网格布局设置宽度与高度，以及网格的列数、行数，都是跟随元素和分辨率自动调节网格的列数、行数。默认子元素都是独占一个单元格的，如果要进行合并单元格，除了前面提到的用。
CSS Grid布局(笔记)
weixin_60963484的博客
03-16 319
grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成// 空着的需用`.`代替"a a .""a a ."". b c";实例#page {/* 1.设置 display 为 grid */"nav main""nav foot";/* 2.区域划分 当前为 三行 两列 *//* 3.各区域 宽高设置 *//* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 */
css之grid布局个人学习笔记
动感超人的博客
12-20 820
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”， 即先填满第一行，再开始放入第二行 （
css学习笔记-grid布局
Laollaoaolao的博客
08-11 665
概述 1.flex布局是一维布局，grid布局是二维布局. 2.flex考虑的是项目按行或列布局，grid布局需要同时考虑行和列. flex布局： grid布局： 基本概念 grid-template-columns可以设置容器的列数以及相应列的宽度 grid-template-rows可以设置容器的行数以及相应行的高度 可以按照像素设置行列的宽高，也可以按照比例来设置(fr) 容器属性 与flex属性相似 1.justify-items 单元格内元素在单元格中的横向排列方式(包括start
CSS Grid 网格布局全解析
09-24
主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
5分钟教你学会 CSS Grid 布局
09-27
主要介绍了5分钟教你学会 CSS Grid 布局的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS Grid布局教程之网格单元格布局
12-13
CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》）...
CSS Grid布局
02-01
关于前端页面布局的开发大会ppt，讲解了CSS layout中的Grid
几款MOCK工具对比
闰土月下追猹
11-17 8100
引子 日常开发中之所以使用数据mock工具生成数据，大致有以下几种原因，直接把假数据写入代码中（所谓开发侵入），数据写死，不便于修改。还有团队协作，没有约定，前后端不能准确描述接口长什么样。还有就是手写假数据没有规则，就不能批量生成大量数据，靠手工肯定不行。或者不单单是开发使用，也可以测试，或者其他用到数据的地方。下面有些工具，简单聊一下，具体使用看文档就可以了。 YApi 官网 GitHub 来自去哪网，基于mock.js语法规则，也可自定义规则，功能强大，适合团队协作使用，出现比较晚，吸收了Nei、E
JavaScript对象过滤掉部分属性
闰土月下追猹
11-25 6833
示例 let device = { name: '设备1', code: '867725031691391', date: '1525835791000' } const obj = (({name, date}) => ({name, date}))(device) console.log(obj) // { name: '设备1', date: '1525835791000' } let { code
Vue-cli3.0关闭预加载
闰土月下追猹
11-26 1643
问题描述 项目换成了@vue/cli 3.x之后，有些资源的加载有些异常，登录的时候会加载内页的CSS和js，不知道是不是路由懒加载配置出了问题，还是Vue-cli 3.0配置有问题。 问题原因 Webpack默认开启了“prefetch”选项，即预载功能，可以在配置中关闭 module.exports = { chainWebpack: config => { config.plugins.delete('prefetch') } } 也可以在需要的页面上面打开此功能。impo
Vue项目集成Sentry错误跟踪平台
闰土月下追猹
11-26 1208
去搭建好的Sentry上，新建一个项目 安装依赖包@sentry/browser # Using yarn $ yarn add @sentry/browser # Using npm $ npm install @sentry/browser 安装依赖包sentry/integrations # Using yarn yarn add @sentry/integrations # Using npm npm install @sentry/integrations main.j..
Centos安装nodejs和版本管理
闰土月下追猹
11-25 1060
安装 yum i nodejs -y 安装Node.js npm i -g n 版本升级 安装最新版 $ n latest 安装指定版本 $ n 8.11.3 切换nodejs版本 $ n 选择已安装的版本 ο node/8.11.3 node/10.4.1 查看当前版本node -v，下面表示已切换成功 v8.13.3 切换后，查看版本还是原来的v6.13.3，看下面 使用n切换nodejs版本失效的解决办法 切换失效的解决办法 查看node当前安装路径 $ which node /u
推荐几款网页幻灯片js库
闰土月下追猹
11-24 948
Impress.js 官网 GitHub Deck.js 官网 GitHub Tacion.js 官网 GitHub Fathom.js 官网 GitHub Reveal.js 官网 GitHub Presenteer.js 官网 GitHub Jmpress.js 官网 GitHub DZ Slides 官网 GitHub Perkele.js 官网 GitHub HTML Slidy 官网
uni-app生命周期与Vue.js生命周期
闰土月下追猹
11-26 749
Vue.js生命周期 uni-app生命周期 除了Vue.js的生命周期外，uni-app增加了页面生命周期和应用生命周期。 应用生命周期： 页面生命周期： 组件生命周期： uni-app不同端生命周期支持情况： 相关文章 详解vue生命周期 ...
webpack-bundle-analyzer分析打包文件
闰土月下追猹
11-26 477
安装： npm install --save-dev webpack-bundle-analyzer 在vue.config.js中配置： const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { chainWebpack: config => { // 打包分析 if (process.env.IS.
Vue中的Runtime Only和Runtime Compiler
闰土月下追猹
11-26 396
从一次报错说起 Vue项目开发中安装使用了一个富文本编辑器插件vue-html5-editor，页面安装使用之后出现如下错误： 错误中提示，该插件使用的编译模式和项目中默认使用的编译模式不一样，即插件使用的编译模式是Runtime Compiler，而项目默认使用的是Runtime Only，因此就出现了上述问题。 Runtime Only 我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 Jav
CSS Grid 布局
最新发布
08-30
要开始使用CSS Grid布局，首先需要为容器元素应用`display: grid`样式。然后，可以使用`grid-template-columns`和`grid-template-rows`属性来定义网格的列数和行数，可以是像素，百分比或者是自动适应内容的大小。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值