热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS栅格布局grid详解

栅格布局分为常规栅格和行内栅格,值分别为display:grid;和display:inline-grid;但是大多数栅格布局都是块级的。

栅格布局分为常规栅格和行内栅格,值分别为display:grid;和display:inline-grid;但是大多数栅格布局都是块级的。这里有一个需要注意的是,如果我们给一个标签设置了栅格布局,有的css属性和功能也就无法使用了,具体如下:

栅格容器上的所有column属性(column-count、columns等)都会被忽略。

栅格元素没有::first-line和::first-letter伪元素,如果使用,将会别忽略。

栅格容器内部的栅格元素的float和clear属性将被忽略。尽管如此,float属性对栅格容器中子元素的display属性的计算值是有影响的,因为栅格元素的display值在变成栅格元素之前计算的。


属性:gird-template-columns(列设置参数),gird-template-rows(行设置参数)

下面就以设置列参数为例:gird-template-columns可以设置栅格容器有几列,每列的宽度,设置方法如下:

1、固定宽度:gird-template-columns:200px  50%  100px;

这个设置的意思是设置为三列,每列的宽度分别为200px,50%容器的宽度,100px;

2、设置最大最小尺寸:gird-template-columns:200px  minmax(100px,50%)  100px;

设置为三列,中间那一列的意思是最小宽度为100px,最大宽度是50%容器的宽度,

3、份数单位:fr;例如平均分成4列:gird-template-columns:1fr 1fr 1fr 1fr ;

也可以使用固定宽度和fr组合的:gird-template-columns:100px 1fr 200px;

这样设置的意思是把容器份分为三列,第一列为100px,第三列为200px,第二列为容器的剩余宽度,用1fr表示;如果是多列的话,就把除了固定的宽度剩余的空间进行分割比列,按照fr的总数进行相应比例分割。

例如:gird-template-columns:100px 1fr  3fr 200px;

4、让列的宽度尽可能大放下全部内容或者尽可能小显示内容即可,min-content和max-content;

例如:给列设置min-content的时候





这就是自己的宽度根据不同的内容进行显示

中部

尾部的内容是多少呢
第二行第一个
第二行第二列的数据很多文字
第二行第三列

结果如下:

 

设置max-content的时候:





这就是自己的宽度根据不同的内容进行显示

中部

尾部的内容是多少呢
第二行第一个
第二行第二列的数据很多文字
第二行第三列

结果如下:

5、自定义适配内容宽度:fit-content(宽度值);这个值得意思是如果栅格元素内容的宽度小于设置的宽度值,那么就会显示元素内容的宽度,如果超出了设置的宽度值,那么就会根据设置的宽度值显示。

.one{display:grid;grid-template-columns:fit-content(40px) fit-content(50px) fit-content(50px)
}

6、重复创建列或者行:repeat(重复次数,列或者行的宽高值),列或者行的宽高值不止一个,可以是多个,那样的话就是重复多列





这就是自己的宽度根据不同的内容进行显示

中部

尾部的内容是多少呢
这是一个弟弟
其中一些呵呵数据很多文字
我们都是一家

展示结果如下:呈现为2列3行的展示效果

重复多列:grid-template-columns:repeat(3,100px 200px);

7、auto-fill自动填充和自动去除空栅格元素auto-fit,也就是显示有标签元素的栅格

.one{display: grid;grid-template-columns:repeat(auto-fill,100px) repeat(3,450px);grid-template-rows:repeat(3,100px);
}

自动填充结果如下:

自动删除空元素:

这个是auto-fill的

这个是auto-fill的:

8、栅格区域划分grid-template-areas和grid-area,通过设置总共的栅格布局样式和单个栅格的区域进行划分





-->
sssssssssssssssssssssssssssssssssssss
ttttttttt
rrrrrrrrrrr
ggggggg

结果如下:

9、栅格附加元素:列线:grid-row-start;grid-row-end;行线:grid-column-start,grid-column-end;通过这四个属性可以把一块区域的栅格元素部分设置成一个一个标签的内容。通过设置栅格线的初始行和列的位置,围成一个区域把这个区域设置成一个标签的内容区域。

/* 栅格容器样式 */
.one{display:grid;grid-template-columns:repeat(5,100px);grid-template-rows:repeat(5,100px);
}
/* 内容样式 */
.content{grid-row-start:2;grid-row-end:4;grid-column-start:2;grid-column-end:4;
}

还可以在附加元素后面加上span 2等数字代表着初始或者结束向前向后移动两个栅格线的距离。

/* 栅格容器样式 */
.one{display:grid;grid-template-columns:repeat(5,100px);grid-template-rows:repeat(5,100px);
}
/* 内容样式 */
.content{grid-row-start:2;grid-row-end:span 2;grid-column-start:2;grid-column-end:span 2;
}

以上代码和第一种代码的效果是等效的。

除此之外还有隐式的栅格线设置,也就是上边的设置简化版:grid-row和grid-column,设置如下:

/* 栅格容器样式 */
.one{display:grid;grid-template-columns:repeat(5,100px);grid-template-rows:repeat(5,100px);
}
/* 内容样式 */
.content{grid-row:2 / 4;grid-column:2 / 4;
}

 

10、栅格流:grid-auto-flow:row/column;默认栅格排列的方向是横排列,从左到右排列,以列为主导row;如果想要让内容从上到下排列,也就是以行为主导,依次进行排列,这时候就应该设置column:

代码如下:





sssssssssss
ttttttttt
rrrrrrr
ssssssssssssssssssssssg

正常默认排列

grid-auto-flow:column;排列,默认的是先排满一行然后在排下一行,而column是先填满一列再填下一列;

11、设置列宽度和行高度,grid-auto-columns和grid-auto-rows,设置的都是整体的宽度和高度,如果是单独设置一个栅格元素的宽高,那么可以进行覆盖设置。





sssssssssss
ttttttttt
rrrrrrr
ssssssssssssssssssssssg

结果如下:

12、栏距:值得是每一个栅格元素之间的距离,可以通过grid-row-gap和grid-column-gap进行设置,或者使用grid-gap:行间距 列间距;进行设置,具体如下设置每一列间距10px:





sssssssssss
ttttttttt
rrrrrrr
ssssssssssssssssssssssg

13、栅格的对齐方式:分为纵向对齐和横向对齐,

行内方向对齐目标:justify-self,justify-items,justify-content

块级方向对齐元素:align-self,align-items,align-content,

其中justify-self是对栅格单个元素进行横向的对齐(左,中,右),algin-self是对栅格元素进行纵向的对齐(上,中,下)

而justify-items和align-items是对栅格全部的元素进行横向和纵向对齐;

justify-content和algin-content是对整行和整列元素进行对齐和排布。具体请看http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

以上就是我对grid的基本认识和学习


推荐阅读
  • 本文详细介绍了W3C标准盒模型和IE传统盒模型的区别,探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析,帮助读者更好地理解和应用这一关键概念。 ... [详细]
  • 作为一名专业的Web前端工程师,掌握HTML和CSS的命名规范是至关重要的。良好的命名习惯不仅有助于提高代码的可读性和维护性,还能促进团队协作。本文将详细介绍Web前端开发中常用的HTML和CSS命名规范,并提供实用的建议。 ... [详细]
  • Startup 类配置服务和应用的请求管道。Startup类ASP.NETCore应用使用 Startup 类,按照约定命名为 Startup。 Startup 类:可选择性地包括 ... [详细]
  • 本文介绍如何在Windows Forms应用程序中使用C#实现DataGridView的多列排序功能,包括升序和降序排序。 ... [详细]
  • 2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商,ARM在嵌入式处理器市场占据主导地位,其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家,共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]
  • 本文介绍了Java并发库中的阻塞队列(BlockingQueue)及其典型应用场景。通过具体实例,展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递,并结合线程池和原子类优化性能。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • 几何画板展示电场线与等势面的交互关系
    几何画板是一款功能强大的物理教学软件,具备丰富的绘图和度量工具。它不仅能够模拟物理实验过程,还能通过定量分析揭示物理现象背后的规律,尤其适用于难以在实际实验中展示的内容。本文将介绍如何使用几何画板演示电场线与等势面之间的关系。 ... [详细]
  • Hadoop入门与核心组件详解
    本文详细介绍了Hadoop的基础知识及其核心组件,包括HDFS、MapReduce和YARN。通过本文,读者可以全面了解Hadoop的生态系统及应用场景。 ... [详细]
  • 深入了解 Windows 窗体中的 SplitContainer 控件
    SplitContainer 控件是 Windows 窗体中的一种复合控件,由两个可调整大小的面板和一个可移动的拆分条组成。本文将详细介绍其功能、属性以及如何通过编程方式创建复杂的用户界面。 ... [详细]
  • 自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ... [详细]
  • ML学习笔记20210824分类算法模型选择与调优
    3.模型选择和调优3.1交叉验证定义目的为了让模型得精度更加可信3.2超参数搜索GridSearch对K值进行选择。k[1,2,3,4,5,6]循环遍历搜索。API参数1& ... [详细]
  • Win10 UWP 开发技巧:利用 XamlTreeDump 获取 XAML 元素树
    本文介绍如何在 Win10 UWP 开发中使用 XamlTreeDump 库来获取和转换 XAML 元素树为 JSON 字符串,这对于 UI 单元测试非常有用。 ... [详细]
author-avatar
沉佩颖岳玲
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有