css grid 布局 ( 入门 )

简介

     Grid是一个强大的规范,当与CSS的其他部分(如flexbox)结合使用时,可以帮助您创建以前不可能在CSS中构建的布局(二维布局)。这一切都是通过在网格容器上创建一个网格来开始的。网格元素的子集 默认会有16px的padding值

使用  :

    父容器设置 display:grid 即成为网格容器。

css grid 布局 ( 入门 )_第1张图片

grid-template-columns 定义网格中的列轨道的大小    

网格还引入了一个另外的长度单位  fr  来帮助我们创建灵活的网格轨道。新的fr单位代表网格容器中可用空间的一等份。

这些轨道会随着可用空间增长和收缩。

-> 在轨道清单中使用repeat()

在上面的例子中 我们很快就会发现一个问题  如果我们的列数过多的情况下 假如说是10列 那我们可能就得写 10个列轨道宽度值来定义网格   这样就显得很蹩脚    repeat 就是用来解决这个问题的 

Repeat 语句可以用于重复轨道列表中的一部分。

repeat 语句的用法1

css grid 布局 ( 入门 )_第2张图片

该值会把整个网格容器 分为 5份   开始 和末位值 为固定px 单位 宽度的列轨道   中间 为3个fr单位为1的列轨道

repeat 语句的用法2

css grid 布局 ( 入门 )_第3张图片

该值会重复 3份 1fr 2fr 的 列轨道配置 总共为6列 即11:22==33:44==55:66==77:88==1:2

 grid-auto-rows :200px 属性 在隐式网格中创建的轨道是200像素高。(自定义网格高度)

css grid 布局 ( 入门 )_第4张图片

css grid 布局 ( 入门 )_第5张图片

使用grid-auro-rows  适应minmax() 实现最小行高  

css grid 布局 ( 入门 )_第6张图片

css grid 布局 ( 入门 )_第7张图片

使用行线 列线 摆放网格 

grid-column-start 

 grid-column-end

grid-row-start 

grid-row-end

css grid 布局 ( 入门 )_第8张图片

css grid 布局 ( 入门 )_第9张图片

->网格间距

在两个网格单元之间的 网格横向间距  或 网格纵向间距  可使用 grid-column-gap 和 grid-row-gap 属性来创建,或者直接使用两个合并的缩写形式 grid-gap

css grid 布局 ( 入门 )_第10张图片

css grid 布局 ( 入门 )_第11张图片

嵌套网格:

一个网格元素可以也成为一个网格容器。在接下来的例子中我事先有了一个3列的网格元素,并有两个跨轨道的网格。在这个例子中,第一个网格元素含有几个子级元素。当这些元素不是网格容器的直接子级元素时,它们不会参与到网格布局中,并显示为正常的文档流。

css grid 布局 ( 入门 )_第12张图片css grid 布局 ( 入门 )_第13张图片

 

grid 布局中的重叠问题

css grid 布局 ( 入门 )_第14张图片

css grid 布局 ( 入门 )_第15张图片

因为改变z-index 值 1将2 覆盖

反之去掉z-index的控制 2 覆盖1

css grid 布局 ( 入门 )_第16张图片

css grid 布局 ( 入门 )_第17张图片

你可能感兴趣的:(css,grid布局)