【grid网格布局】

最新推荐文章于 2024-08-01 16:10:45 发布

renrenrenrenqq

最新推荐文章于 2024-08-01 16:10:45 发布

阅读量729

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/renrenrenrenqq/article/details/122310479

版权

本文深入探讨了CSS Grid布局，包括如何通过display: grid设置网格，调整行和列的属性，如grid-template-rows和grid-template-columns。文章还详细阐述了响应式布局的实现，如auto-fit和auto-fill的区别，以及justify-content和align-content对内容位置的影响。此外，还介绍了项目属性，如grid-column, grid-row和grid-area，以及单元格内容的定位。最后，讲解了grid-auto-flow属性在自动布局中的作用。" 104327364,9285571,STC15单片机实战：PCB设计与打样教程,"['单片机', 'PCB', 'PCB打样', '硬件开发', '嘉立创']

摘要由CSDN通过智能技术生成

文章目录

Grid 网格布局
Grid行与列的属性调节
- Grid的响应式布局
- justify-content, align-content
项目属性
- grid-column，grid-row 属性，
单元格内容
- grid-area 属性
- grid-auto-flow属性

Grid 网格布局

通过设置CSS属性 display: grid;
可以定义一个 CSS 网格

注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

Grid行与列的属性调节

grid-template-rows 属性定义网格布局中的列数，并可定义每列的宽度。

grid-template-columns 属性还可以用于指定列的尺寸（宽度）。
六种表达式：

length,百分比（占用容器的百分之几）
repeat(3,100px)
fr: grid-template-columns: 150px 1fr 2fr;

grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);

表示有4列，第一列100px固定尺寸，第三列 max-content 代表刚好包含元素不溢出不换行的尺寸，剩下的2列都是弹性尺寸。
在这里插入图片描述

按照弹性尺寸的计算规则，两者将均分（这两列的弹性系数相等，均为1）剩下的可用空间。
4. auto : auto关键字表示由浏览器自己决定长度。
5. minmax(200px, 400px)
minmax()函数使我们能够为轨道设置最小和最大大小，从而使Grid能够在其中运行。
7. maxcontent
8. grid-template 是grid-template-rows ，grid-template-columns简写。

grid-template: grid-template-rows/grid-template-columns
例如：grid-template: repeat(3,200px)/repeat(3,100px);
创建一个三行每行高度200px 三列每列宽度100px 的网格。