博客列表 >第12章 1224- Grid布局基础知识,学习心得、笔记

第12章 1224- Grid布局基础知识,学习心得、笔记

努力工作--周工--Robin
努力工作--周工--Robin原创
2021年01月19日 06:16:59580浏览

今天所学心得、笔记

1、grid布局理解,与代码实践

  1. 1、采用grid布局的区域,称为“容器”。容器子元素称为“项目”,“项目”中子元素不是“项目”;
  2. 2、容器里面的水平区域为"行"(row),垂直区为"列"(column),行和列的交叉区为"单元格"(cell);
  3. 3、使用grid布局后,所有“项目”元素都会变为块元素;
  4. display: grid;
  5. /*设置大小为100px,3 * 3的布局*/
  6. grid-template-columns: 100px 100px 100px;
  7. grid-template-rows: 100px 100px 100px;
  8. /*项目间,行列间距10px,支持缩写;*/
  9. gap: 10px 10px;
  10. gap: 10px;
  11. /* 轨道列宽 */
  12. /*使用固定值*/
  13. grid-template-columns: 10em 10em 10em;
  14. /*使用fr单位,中间项目,比两边大1倍*/
  15. grid-template-columns: 1fr 2fr 1fr;
  16. /*使用百分比*/
  17. grid-template-columns: 20% 60% 20%;
  18. /*各种单位混合使用*/
  19. grid-template-columns: 8em 1fr 2fr 200px;
  20. /*各种单位混合使用*/
  21. grid-template-columns: 30% auto 10em;
  22. /*fr单位,与auto不能共用*/
  23. grid-template-columns: 1fr auto 1fr;
  24. /* 轨道行高 */
  25. grid-template-rows: 5em 5em 5em;
  26. /*------------------------------------------------------------*/
  27. /*使用repeat()参数*/
  28. grid-template-columns: repeat(3, 10em);
  29. /* 第二个参数可以是多个值 */
  30. grid-template-columns: repeat(3, 10em 3em 3em);
  31. grid-template-columns: repeat(3, 1fr);
  32. grid-template-columns: repeat(3, 1fr 2fr);
  33. /* 混合使用 */
  34. grid-template-columns: repeat(2, 1fr) 2fr;
  35. /*------------------------------------------------------------*/
  36. /* minmax() */
  37. /* 中间列,最小宽度是20em,最大宽高是左右的2倍 */
  38. grid-template-columns: 1fr minmax(10em, 2fr) 1fr;
  39. /*------------------------------------------------------------*/
  40. /* 此时,默认项目在容器中按: 先行后列的顺序排列,“行优先” */
  41. grid-auto-flow: column;
  42. grid-auto-flow: row;
  43. /* 自动生成的隐式轨道的高度是自动的 */
  44. /* 行优先时要设置隐式轨道的行高 */
  45. grid-auto-rows: 8em;

1、自定义项目在容器的显示位置

  1. .container span {
  2. background-color: pink;
  3. text-align: center;
  4. line-height: 5em;
  5. }
  6. .container {
  7. display: grid;
  8. border: solid 1px;
  9. padding: .5em;
  10. gap: .5em;
  11. grid-template-columns: repeat(4, 1fr);
  12. grid-template-rows: repeat(4, 5em);
  13. }
  14. .container span:nth-of-type(10) {
  15. background-color: lightblue;
  16. /* grid-area: 设置任何一个项目所在的网格单元的区域 */
  17. /* grid-area: 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号 */
  18. /* 以第10个项目来举例,将它放入到第一个网格单元中 */
  19. grid-area: 1 / 1 / 2 / 2;
  20. grid-area: 1 / 1;
  21. /* 例如要跨2行3列 */
  22. grid-area: 1 / 1 / 3 / 4;
  23. /* 通常写法,只关心跨几行或几列,并不关心结束的编号 */
  24. grid-area: 1 / 1 / span 3 / span 4;
  25. }
  26. /* 选中第一个项目 */
  27. .container>span:first-of-type {
  28. background-color: lightyellow;
  29. grid-area: 4 / 1 / span 1 / span 4;
  30. /* 因为 4 / 1 是当前位置,所以可省 */
  31. grid-area: span 1 / span 4;
  32. /* 之前说过,默认是跨一行一列 */
  33. grid-area: auto / span 4;
  34. }

代码示例截图

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议