当前位置:网站首页 > R语言数据分析 > 正文

grid 布局(grid布局每行高度不同怎么处理)



Grid 网格布局

flex布局是轴线布局,只能指定项目针对轴线的位置,可以看作是一维布局。

grid布局则是将容器分成行和列,产生单元格,指定项目所在的单元格,可以看作是二位布局

grid布局比flex更强大


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

容器

网格布局的区域称为容器

容器属性

行和列

row —行
column---- 列
grid-gap 行列间隔

grid-gap: ;

grid-row-gap 行间隔
grid-column-gap 列间隔
grid-template-areas 自定义区域
grid-auto-flow 调整row 还是column
justify-items 属性,align-items 属性,place-items 属性 —项目的布局

.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}
start:对齐单元格的起始边缘。
end:对齐单元格的结束边缘。
center:单元格内部居中。
stretch:拉伸,占满单元格的整个宽度(默认值)。






place-items属性是align-items属性和justify-items属性的合并简写形式

justify-content 属性,align-content,place-content 属性—容器布局

.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}


place-content属性是align-content属性和justify-content属性的合并简写形式。

grid-auto-columns 属性, grid-auto-rows 属性

一些项目的指定位置,在现有网格的外部。比如网格只有3列,但是某一个项目指定在第5行。这时,浏览器会自动生成多余的网格,以便放置项目。

grid-template 属性,

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

项目

容器内部采用网格定位的子元素称为项目。

项目属性

grid-column-start 属性,
grid-column-end 属性,
grid-row-start 属性,
grid-row-end 属性


–基线的位置设置 行和列的设置


—grid-column属性是grid-column-start和grid-column-end的合并简写形式,grid-row属性是grid-row-start属性和grid-row-end的合并简写形式


grid-area 属性

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传


justify-self 属性,
align-self 属性,
place-self 属性

到此这篇grid 布局(grid布局每行高度不同怎么处理)的文章就介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章,希望大家都能在编程的领域有一番成就! 



版权声明


相关文章:

  • spark面试题及答案100道(spark 面试题)2025-07-31 12:45:05
  • straw的用法(steward用法)2025-07-31 12:45:05
  • chronyc同步(chronyc同步不成功)2025-07-31 12:45:05
  • 电脑笔记软件mo(电脑笔记软件typora)2025-07-31 12:45:05
  • airplay怎么关掉(苹果airplay在哪里关闭)2025-07-31 12:45:05
  • resnet50和resnet18(resnet50和resnet18区别)2025-07-31 12:45:05
  • aipods蓝牙耳机(airpods蓝牙耳机)2025-07-31 12:45:05
  • emr和aes区别(aem和ees)2025-07-31 12:45:05
  • ipad无法连接到app stroe(iPad无法连接到itunes store怎么解决)2025-07-31 12:45:05
  • ifstream和ofstream(ifstream和ofstream创建的文件在那里)2025-07-31 12:45:05
  • 全屏图片