欢迎光临
我的个人博客网站

CSS Grids教程学习笔记

这是我在学习MDN内CSS Grids教程的学习笔记,教程地址:https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

注:这个笔记之能做温习只用,看教程请上以上地址学习或者其他教学资源。

 

容器上设置display: grid;就成为了grid容器。

Grid容器上设置:

grid-template-column: 200px auto 1fr;可以设置各个列。1fr是占比,空间先被200px这样的固定宽度占用,剩下的再按各自fr的占比分配。

grid-column-gapcolumn-gap设置列之间的间隔宽度,不能使用fr。

grid-row-gaprow-gap设置行之间的间隔宽度,不能使用fr。

grid-gapgap可以同时设置行和列的间隔宽度,不能使用fr。    

grid-template-column: repeat(3, 1fr)可以设置三个各为1fr的列。

 

隐形grid和显性grid的区分:

隐形grid是指指定列,没有指定行数,宽度大小都是默认auto,当溢出时就变成和flexbox差不多一样的排列显示方式。

显性grid是指指定了列和行,使用grid-auto-rowsgrid-auto-columns属性指定行和列的大小。

 

Grid-auto-rows: minmax(100px, auto);可以设置行高最小100px,最大auto。

Grid-auto-columns: repeat(auto-fill, minmax(200px, 1fr));可以设置列最小为200px,自动列数,有多余空间就使用掉。(好像要配合以上的grid-auto-rows才有效果!!!)

 

Grid元素上设置:

       grid-column: 1 / 3;可以设为1到3列的横跨排布;-1为最后一列

       grid-row: 2;可以设为在第二行的排布;-1为最后一行

grid-column-start,grid-column-end,grid-row-start,grid-row-end为以上的拆分。

 

以下属性放在grid容器上可以设置排布模板(只能是矩形,可以使用点符号 . 来代替空白):

grid-template-areas:  

       “header header”

      “sidebar content”

       “footer footer”;

然后再各个grid元素上设置:grid-area: header;这样。

 

Grid可以代替像bootstrap这样的框架,可以设置12列,以下是line-based的图:

CSS Grids教程学习笔记

如下代码设置每个grid元素的位置和占比。

header {   grid-column: 1 / 13;   grid-row: 1; }  article {   grid-column: 4 / 13;   grid-row: 2; }  aside {   grid-column: 1 / 4;   grid-row: 2; }  footer {   grid-column: 1 / 13;   grid-row: 3; }

赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS Grids教程学习笔记
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏