CSS Grid布局(3)

最新推荐文章于 2022-08-18 17:04:23 发布
最新推荐文章于 2022-08-18 17:04:23 发布
阅读量400 收藏
点赞数
分类专栏： Grid 文章标签： css 布局

10.网格线命名

通过grid-template-rows和grid-template-columns定义网格时，网格线可以被命名。网格线名称也可以设置网格项目位置

这里写图片描述

grid-template-rows和grid-template-columns定义你的网格，将名称分配给网格线

定义网格线名称时需要避免使用规范中出现的关键词，以免导致混乱

分配网格线名称必须用方括号[网格线名称]，然后后面紧跟网格轨道的尺寸值

这里写图片描述

这里写图片描述

可以在方括号中添加多个名称来命名网格线名称，使用多外名称命名网格线名称时，名称间要用空格隔开

每一个网格线的名称可以用来定位网格项目的位置

这里写图片描述

11.通过网格线名称设置网格项目位置

使用网格线名称设置网格项目位置和使用网格线号码设置网格项目位置类似

这里写图片描述

引用网格线名称的时候不应该带方括号

这里写图片描述

这里写图片描述

grid-row和grid-column简写属性也适用于网格线名称，也可以用来设置网格项目的位置

这里写图片描述

12.使用相同的名称命名网格线和设置网格项目位置

tian361zyc
关注
专栏目录
css3 grid
woochon的博客
01-18 276
css3 grid布局 grid
13、CSS3中的grid布局（网格布局）
weixin_45065754的博客
04-06 1145
1、flex布局与grid布局区别 2、grid容器属性 3、grid元素属性 4、grid实现网页布局 5、grid笔记源代码
73、美团算法题---用CSS实现一个3×3九宫格
sunnnnh的博客
10-02 539
一、使用grid布局 参考Grid布局简介 - 云+社区 - 腾讯云 （1）fr单位：CSS 栅格布局带来了一个全新的值:fraction单位，fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块。 如果我们将grid-template-columns的值更改为1fr 2fr 1fr。总宽现在是四个 fraction 单位，第二列的宽度将会是其它两列的两倍，其它列各占一个 fraction，此时这些子元素都会随着外层盒子container宽度的变化而变化。 （2）repeat(参数
css3最简单之 grid布局
weixin_43258615的博客
08-18 326
css3的grid布局
Css练习---Grid Table
diansunyu4787的博客
04-23 306
table header渐变色 table row交替色 large table宽度770px，small table宽度400px 定义表格css,保存为GridTable.css .largetable/**//*largetable*/ {}{ width:770px; clear:both; ove...
使用CSS Grid布局实现网格的流动
09-25
CSS Grid布局是一种二维网格系统，用于页面布局设计。它允许设计者将元素排列成行和列，通过定义网格轨道大小、网格间隙以及网格区域，实现复杂的布局效果。CSS Grid布局由CSS Grid布局属性定义，与传统的浮动布局...
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
12-13
上一篇《CSS Grid布局教程之什么是网格布局》中简单介绍了什么是CSS Grid Layout以及一些概念和术语，为后续学习和使用CSS Grid Layout做了一些铺垫。但浏览器对CSS Grid Layout到目前为止各浏览器厂端支持程度不...
CSS Grid布局教程之网格单元格布局
12-13
CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》）...
10分钟理解CSS3 Grid布局
09-22
CSS3 Grid布局是一种用于网页布局的二维布局系统，它由CSS工作组在2011年提出并不断完善。网格布局能够将网页划分成多个网格区域，通过指定项目（子元素）所在的网格区域位置，实现复杂且灵活的布局。 在Grid布局...
5分钟教你学会 CSS Grid 布局
09-27
CSS Grid布局是一种用于网页设计的二维布局系统，它能够让你在网页上创建复杂的网格布局结构。随着主流浏览器如Safari、Chrome、Firefox和Edge的原生支持，CSS Grid已经成为前端开发者必须掌握的技能之一。它被认为...
每行显示3列
zhanglong_longlong的专栏
01-19 660
for (int i = 0; i < 10;) { html += ""; for (int j = 0; j < 3 && i < 10; i++, j++) { html += "xxx"; } html += "\n"; }
如何使用grid布局
qq_46511756的博客
06-21 2357
以下都是写在父元素（grid容器上）添加了grid布局的容器默认是块元素。可以添加display:inline-grid; 改变成为行内块元素。改变格子排列方向grid-auto-flow：column；处理格子的流动方式（了解）grid-auto-flow：dense； //可以把多余空间占满控制内容在容器格子内的排列控制格子的排列，和flex一样，写在父元素上，水平居中、贴边等……，垂直居中、底部对其等……，控制单个元素 justify-self、align-self。组合简写：place-conte
CSS3的grid布局
weixin_47980523的博客
08-05 845
grid布局的相关概念 采用网格布局的区域，称为"容器"（container）。 容器内部采用网格定位的子元素，称为"项目"（item）。 注意：项目只能是容器的顶层子元素，不包含项目的子元素。Grid 布局只对项目生效。 grid布局中的行和列 容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。 grid布局中的单元格 2. 行和列的交叉区域，称为"单元格"（cell）。正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产...
如何使用 CSS Grid 快速而又灵活的布局
颤抖的羽翼
12-26 660
CSS Grid(网格) 模块是创建网站布局一个非常棒的工具。它能使你快速地进行布局尝试，比你尝试过的任何其他布局系统都快。 在这篇文章中，我会教你如何使用 CSS Grid 进行快速布局。 我的要创建的网格 我们将模仿一个经典网站布局，从非常基本的 Grid(网格) 开始： 首先，我将解释我们需要的 HTML 和 CSS ，我已经将其分解为四个部分。 一旦你了解了
css(3)grid网格布局总结
Echianer的博客
01-12 390
文章目录前言一、display:grid二、grid网格模型（在父元素设置）1.显式网格属性1.grid-template-columns2.grid-template-rows3.grid-template-areas2.隐式网格属性1.grid-auto-columns2.grid-auto-rows3.grid-auto-flow3.间距属性1.grid-gap1.grid-row-gap2.grid-column-gap三、在子元素设置1.grid-area总结 前言 网格布局也是比较常用的布局.
快速学会 Grid 布局
wplnancy的博客
12-03 309
类似当初学习 flex 布局的时候，只要理解了布局的原理，就可以灵活的运用，减轻自己的代码量，看完下面的介绍，妈妈在也不用担心我的 Grid 布局了 Grid 布局是网站设计的基础，CSS Grid 是创建网格布局最强大和最简单的工具。 CSS Grid 今年也获得了主流浏览器（Safari，Chrome，Firefox，Edge）的原生支持，所以我相信所有的前端开发人员都必须
CSS Grid 网格布局（详解）
qq_45032714的博客
05-13 2153
注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
快速掌握CSS3 Grid布局
"10分钟理解CSS3 Grid布局" 在前端开发中，CSS3 Grid布局是一个极其重要的工具，它提供了一种强大的二维布局机制，能够帮助开发者更高效地创建响应式和自适应的网页设计。本篇文章将简明扼要地介绍CSS3 Grid布局的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值