grid 布局基础知识常用属性学习与感想

grid 布局基础知识常用属性学习与感想

创建容器

  display: grid;

行优先

 grid-auto-flow: row;

列优先

 grid-auto-flow: column;

显式行与列

grid-template-rows:100px 100px 100px;
grid-template-columns:100px 100px

对于放置不下的项目，会隐式生成单元格,修改隐式行大小

grid-auto-rows: 150px;
grid-auto-column: 150px;

这种叫固定值：

      grid-template-rows: 100px 100px 100px;
      grid-template-columns: 100px 100px 100px;

按百分比划分

        grid-template-rows: 100px auto 100px;
        grid-template-columns: 20% 30% auto;

按比例划分 grid 特有的一个单位：fr （按比例划分）

        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;

重复设置行和列

        grid-template-columns: repeat(3,100)
        grid-template-rows: repeat(3,100px);

分组设置

grid-template-columns: repeat(2,50px 100px);

弹性设置

     grid-template-columns: repeat(2 minmax(50px 100px));
     grid-template-rows: repeat(3 minmax(150px 1fr));

自动填充

grid-template-columns: repeat(auto-fill,100px);

用网格线划分单元格

• 第一种写法

        grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 3;

填满

        grid-row-start: 1;
        grid-row-end: -1;
        grid-column-start: 1;
        grid-column-end: -1;

• 第二种写法 简写

        grid-row: 1/3;
        grid-column: 3/5;

• 第三种写法 用偏移量来简写

        grid-row-start: 3;
        grid-row-end: span 2;
        grid-column-start: 1;
        grid-column-end: span 2;

或 起始位置就是元素位置

         grid-row-end: span 2;
        grid-column-end: span 2;

• 第四种写法 用语义化的标签

        grid-row-start: r2-start;
        grid-row-start: r1-end;
        grid-column-start: c3-start;

• 第五种简写：小重点：行开始/列开始/行结束/列结束

        grid-area: 1/1/2/5;

偏移量简化

grid-area: 1/1 / span 1 / span 4;

或者更简化

grid-area:  span 1 / span 4;

甚至更简化 grid-area: span 2;

命名网络区域 相同命名区域会合并

• grid-template-area

• 网格区占位符知识 "..."

网格区域线的默认名称

grid-area: header-start / header-start / header-end / header-end; }

设置单元格在容器中的对齐方式，和 flew 相仿，但是代码中去掉 flew 字样

 justify-content: center;
align-content: center;
justify-content：space-between
justify-content:space-around
 justify-content:space-evenly
align-content：space-between
align-content:space-around
align-content:space-evenly

或者简写

place-content

项目在单元格中对齐方式

      justify-item: stretch;
        align-item: stretch;
        align-items: center;
        place-items: center center;

某个项目在单元格中的对齐方式：

        justify-self: start;
        align-self: end;
        place-self: center;

每个项目设置一个间隙

        column-gap: 5px;
        row-gap: 5px;
        gap: 5px;

感想：

grid属性和flex属性很像，因此，并不难记，难点是容易和flex混淆。

据说计算机二进制来源于中国的太极八卦，二级制都来自于中国太极八卦，真是一生二，二生三，三生万物，学习越深入，越觉得和我国的太极八卦，五行等有相通之处，代码变化多端，单元格针对容器位置可以变化，项目针对单元格位置，都可以变化，而且项目可以无限大（占很多个单元格），项目又可以无限小（在单元格中还能有各种对齐方式），真的觉得很我国的太极理论太像了。有意思，好玩！

难道宇宙就是二进制代码编写的？我们的世界就是虚拟世界的写出来的东西吗，这难道是人生的真谛？

继续努力，相信孰能生巧。加油。

作业

作业是我上机自己练习的几个东西，上传到了自己的服务器上，基本和课堂内容是一致的。

练习1

练习2

练习3

练习4

练习5

练习6

练习7

练习8

练习9

练习10

练习11