css Grid布局记录

网格布局(Grid)是最强大的 CSS 布局方案。

基本概念

采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)。

ex:

fir
second
third
fourth

上面代码中,最外层的

元素就是容器,内层的四个
元素就是项目。

注意:项目只能是容器的顶层子元素,不包含项目的子元素,比如上面代码的元素就不是项目。Grid 布局只对项目生效。

grid布局还包括 行和列 单元格 网格线 具体见 阮一峰大神教程

基础入门示例

html

fir
second
third
fourth

css

.gridContainer{
	display: grid;
    /* 有几个显示几列几行 每行每列的宽度 */
    grid-template-columns: 500px 500px;  
    grid-template-rows: 100px 100px 100px;
}
.fir{
    background-color: aqua;
}
.second{
    background-color: rgb(238, 255, 0);
}
.third{
    background-color: rgb(0, 140, 255);
}
.fourth{
    background-color: rgb(0, 255, 34);
}

效果
css Grid布局记录_第1张图片
要使用grid布局,只需要在容器上将 display 属性设置为 grid 即可

上面示例的
grid-template-columns的两个值表示每行2列,相应的数值表示列宽即都为500px。
grid-template-rows的3个值表示3行,相应的数值表示行高即都为100px

可以看到并没有显示3行,这是因为我们只设置了四个块,在第二行便放满啦,可以通过设置项目(每一个内部顶层div)来弄出效果

css

.fir{
    grid-column-start: 1;
    grid-column-end: 3;
    background-color: aqua;
 }

上面代码意思就是: fir 的div 占据从第一条网格线开始,到第3条网格线结束

也可以简写为

.fir{
	  grid-column: 1/3;
      background-color: aqua;
   }

都可以达到如下效果
css Grid布局记录_第2张图片
这里可以通过这个属性动态增加每行显示的列数

css

.fir{
	 grid-column: 1/4;
     background-color: aqua;
  }

在这里插入图片描述
可以看到每行显示了三列 ,有兴趣的小伙伴可以继续尝试增加看会出现什么效果

 

结构布局

html

header
menu
content
footer

css

.gridContainer{
            display: grid;
            grid-template-columns: repeat(12,1fr);  
            grid-template-rows: 100px 550px 100px;
            gap: 10px;
            grid-template-areas: 
            "h h h h h h h h h h h h "
            "m m c c c c c c c c c c "
            "f f f f f f f f f f f f "
            ;
        }
        .fir{
            grid-area: h;
            background-color: aqua;
        }
        .second{
            grid-area: m;
            background-color: rgb(238, 255, 0);
        }
        .third{
            grid-area: c;
            background-color: rgb(0, 140, 255);
        }
        .fourth{
            grid-area: f;
            background-color: rgb(0, 255, 34);
        }
        span{
            font-size: 50px;
        }

代码解释:
repeat()接受两个参数,第一个参数是重复的次数(上例是12),第二个参数是所要重复的值。
fr 是网格容器剩余空间的等分单位。

所以上面grid-template-columns: repeat(12, 1fr);的意思就是使用 grid-template-columns 属性创建一个 12 列的网格,每个列都是一个单位宽度(总宽度的 1/12 )。

如果还不清楚 推荐观看 阮一峰大神教程

grid-template-rows上面已经说过啦就不再说啦

gapgrid-gap的缩写,有(grid-row-gapgrid-column-gap)的功能,代表的是设置行列间的间隔,最新标准这个属性的grid前缀已经删除,直接使用便可。

grid-template-areas属性中的值,每个字符串代表一行,每行中的每个字母代表占1/12份,可以通过字母多少来控制大小

最后将每个项目div通过 grid-area与相应的字母进行匹配即可,最后达到效果如下(这个效果是响应式的):
css Grid布局记录_第3张图片
可以尝试下其他各种操作,例如将menu换到右边:
只需更改m的位置
css

grid-template-areas: 
            "h h h h h h h h h h h h "
            "c c c c c c c c c c m m"
            "f f f f f f f f f f f f "
            ;

css Grid布局记录_第4张图片
是不是很方便 就能实现响应式布局啦,grid(网格)布局用熟练了真的是布局神器,更多grid布局属性可以查看 阮一峰大神grid布局教程

ps:所有这些更改都是使用纯 CSS 完成的,不需要修改 HTML 。这被称为结构和表现分离, Grid(网格) 布局真正做到了这点。
over
 
 
 
博文参考:
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

https://www.cnblogs.com/moqiutao/p/8682142.html

你可能感兴趣的:(前端基础)