4 合并grid列_grid布局笔记8——grid-auto-columns、grid-auto-rows

最新推荐文章于 2024-07-07 19:39:12 发布
最新推荐文章于 2024-07-07 19:39:12 发布
阅读量868 收藏
点赞数 1
文章标签： 4 合并grid列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39736047/article/details/111709265
版权
本文介绍了CSS Grid布局中当项目数量超过预设网格时，如何使用grid-auto-columns和grid-auto-rows属性来定义多余项目的列宽和行高。讨论了grid-auto-flow对项目自动放置的影响，并通过示例详细阐述了两种情况下的应用：一是项目超出设定网格，二是项目放置在预设行列之外。最后提到了grid-template和grid属性的简写形式，但建议谨慎使用。
摘要由CSDN通过智能技术生成

有时候，因为特殊的需要，我们需要在现有网格的外部放置一些项目，或者我们设置了好了网格，例如3行3列，但是项目有10个，那么多余的项目或者现有网格外部的项目的列宽和行高是多少呢？

grid-auto-columns属性设置多余网格的列宽，grid-auto-rows属性设置多余网格的行高。

第一种情况，项目数目超过设置单元格数量，浏览器自动放置多余项目

这种自动放置和grid-auto-flow的设置有关，如果grid-auto-flow取值为row或者row dense，我们设置3行3列的网格。多余项目是这样放置的——

030ef12f6b0914cd0529fad4d703ec8d.png

多余的项目会另起一行放置，这个时候多余项目的宽度grid-template-columns设置的行高一致(例如上图的10项也是属于第一列的，宽度就是第一列的列宽)，所以我们设置grid-auto-columns属性是没有效果的，这个时候我们只能设置多余项目的行高——grid-auto-rows，下面我们设置多余行高为200px

bdcf47f1c867f4341742ae3ebdc0df95.png

grid-auto-rows&

最低0.47元/天 解锁文章
weixin_39736047
关注
vxe-grid 表格头标题设置及内容合并列项
onlylele的博客
04-27 1970
vxe-grid 表格的高级使用： 自定义表格表头标题动态添加，内容列有合并项；
Grid网格布局笔记
kun_96的博客
06-01 357
Grid网格布局笔记 常用的三种布局方式对比 1.传统布局方式 利用position属性 + display属性 + float属性布局，兼容性最好，但是效率低，麻烦！ 2.flex布局 有自己的一套属性，效率高，学习成本低，兼容性强！ 3.grid布局 网格布局（Grid）是最强大的 CSS 布局方案。但是知识点较多，学习成本相对困难些，目前的兼容性不如flex好！ 容器属性 1.grid-template-columns 2.grid-template-rows a. 想要多少行或者列，就填写相应属性值
grid布局之容器属性grid-auto-columns&grid-auto-rows
youhebuke225的博客
09-02 644
margin;padding;}ul{width;height;border;;color;text-align;;}{;repeat(,);repeat(,);gap;/* 用来设置多出来的项目的宽和高 */}
【CSS】了解grid-auto-columns和grid-auto-rows属性
最新发布
读心悦
07-07 481
和是 CSS Grid Layout（网格布局）中的两个重要属性，它们用于定义在显式网格（即那些通过或明确指定的网格区域）之外的隐式网格（即自动创建的网格线之间的空间）中的列和行的尺寸。
CSS3 网格布局(grid layout)基础知识 - 隐式网格自己主动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)...
weixin_33725270的博客
02-22 396
网格模板（grid-template）属性及其普通写法（longhands）定义了一个固定数量的轨道。构成显式网格。 当网格项目定位在这些界限之外。网格容器通过添加隐式网格线生成隐式网格轨道。 这些隐含的和显式的网格线一起构成隐式网格（implicit grid）。 隐式网格轨道的尺寸由网格...
CSS3 网格布局(grid layout)基础知识 - 隐式网格自动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)
陈小峰（iefreer）的专栏
01-20 4627
网格模板（grid-template）属性及其普通写法（longhands）定义了一个固定数量的轨道，构成显式网格。 当网格项目定位在这些界限之外，网格容器通过增加隐式网格线生成隐式网格轨道。 这些隐含的和显式的网格线一起构成隐式网格（implicit grid）。 隐式网格轨道的尺寸由网格自动行（grid-auto-rows）和网格自动列（grid-auto-columns）属性来确定。
css(3)grid网格布局总结
Echianer的博客
01-12 388
文章目录前言一、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网格布局
m0_70646869的博客
05-10 217
grid-template-columns：定义每一列的列宽 可以使用repeat() repeat(3, 33.33%)，定义三列，每一列为33.33%宽 repeat(2, 100px 20px 80px)，定义了六列，第1列和第4列为100px，第二列和第5列为20px… repeat(auto-fill, 100px)，表示不固定大小的容器，希望一行尽量放慢项目，每个项目为100px 还可以使用fr，比例关系，100px 1fr 2fr，第一列为100px..
grid布局笔记
qq_42529941的博客
12-25 280
grid布局概述 1.flex布局是一维布局，grid布局是二维布局。 2.flex考虑的是项目按行或列布局，grid布局需要同时考虑行和列。 grid-auto-flow: row：告诉自动布局算法依次填充每行，根据需要添加新行 column：告诉自动布局算法依次填入每列，根据需要添加新列 dense：告诉自动布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺 justify-items 沿着 行轴线(row axis) 对齐 网格项(grid items) 内的内容 align-items
前端学习之CSS---多列布局、响应式布局、网格布局
weixin_45258154的博客
06-12 743
瀑布流效果，网格线划分，响应式布局媒体查询
grid 合并单元格示例
10-24
实现grid单元格重复数据的合并，完整的案例实现，包含合并方法和调用过程
grid布局
m0_66939000的博客
10-02 1662
CSS 网格布局引入了二维网格布局系统，可用于布局页面主要的区域布局或小型组件。 网格是一组相交的水平线和垂直线，它定义了网格的列和行。你可以使用固定的轨道尺寸创建网格，比如使用像素单位。你也可以使用比如百分比或者专门为此目的创建的新单位 fr来创建有弹性尺寸的网格。
css中, grid-auto-rows: 怎样简写在grid:中
kfepiza的博客
02-19 482
你需要单独设置这个属性来定义自动生成的行的高度。这是由CSS Grid规范的当前设计决定的，它要求某些属性必须单独设置，而不是通过。被用来定义当网格容器中的内容超出明确定义的行时所创建的隐式行的高度。则单独设置了当内容超出明确定义的行时所创建的隐式行的高度。属性用于指定自动生成的网格容器的行的大小。的设置，你还是需要使用完整的属性名来指定。属性用于指定自动生成的网格行的大小。属性设置了网格的模板行和列的大小，而。的值，你还是需要单独设置，因为。被用来定义网格的行列结构，而。但在这个简写中，你并没有设置。
vxe-table 分页 + 设置行颜色+合并列（vxe-grid）
weixin_46166771的博客
04-19 2910
vxe-table 分页 + 设置行颜色+合并列（vxe-grid）
CSS 之 grid 网格布局
weixin_45092437的博客
09-16 1502
设置display: grid;的元素，即为容器元素，容器属性共有17条，包含以下：grid-template-columns、grid-template-rows、column-gap、row-gap、gap等等 容器的直接子元素即为项目元素，项目属性共有10条，包含以下：grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area、justify-self、align-self等等
Vxe Table/Grid 单元格分组合并
℡メ㏑╭ァ小凯
07-26 4589
一般的合并，不带逻辑，直接就把各自列对应的相同名字的列合并了，如下所示，不是合同的数据，值一样，直接给合并了。3、具体mergeRowMethod的实现方法如下。2、实现vxetable或者grid的合并方法。1、配置要合并的字段。...
【vxetable】vxeGrid合并单元格列处理spanMethod合并多列多行数据
weixin_62273193的博客
05-08 2468
合并多列，后面一列需要根据前面一列在基本上再合并处理。
【CSS Grid网格布局】常用属性，示例代码解读
花椒和蕊的博客
08-21 1018
grid-column-start/grid-column-end/grid-row-start/grid-row-end：用于定义单个网格元素的起始位置和结束位置。grid-template-columns/grid-template-rows：用于定义网格的列和行的大小和数量。grid-auto-columns/grid-auto-rows：用于定义没有显式指定大小的网格的列和行的大小。grid-column-gap/grid-row-gap：用于定义网格的列间距和行间距。
CSS Grid布局详解：创建3x3 Tic-Tac-Toe棋盘
`将元素转换为网格后，可以通过`grid-template-rows`和`grid-template-columns`属性来设置行和列的定义。这两个属性分别决定了网格的行数、行高以及列数和列宽。例如，`.game-board`中设置的`grid-template-rows: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值