search

博客列表 >12-30作业：Grid属性示例

12-30作业：Grid属性示例

十年一梦
十年一梦原创
2020年01月02日 12:21:22929浏览

Grid 布局初入门

1、Grid 术语

  • 网格线（Grid lines)：编号，命名，如下图，实线和虚线都是网格线；

  • 轨道（Grid tracks)：二条线中间的空间，单位 px像素、%百分比、fr 自动分配空间比例、auto自动大小，如图红色框就叫轨道；
示例图

  • 单元格（Grid cell)：四条网格线包裹起来的封闭的空间，如图，每个红色框都是单元格；
示例图

  • 网格区域（Grid area)：多个单元格形成的矩形区域，如图，红色框就是网格区域；
示例图

  • 网格间距（Gird gap)：行或列之间的间隙，如图，红色框里 虚线区域就是网格间距；
示例图

2、Grid 属性

2.1 创建显式轨道；

  • grid-template-columns ：基于列，创建网格线的名称和轨道大小，
  • grid-template-rows ：基于行，创建网格线的名称和轨道大小，

    如图，创建三列三行 大小为100px * 100px 的9个Grid单元格；

示例图

html代码示例；
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局属性案例</title>
  6.     <style>
  7.         .container {
  8.             display: grid;
  9.             grid-template-rows: repeat(3, 100px);
  10.             grid-template-columns: repeat(3, 100px);
  11.             grid-template-areas: 
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <div class="container">
  17.     <div class="items">1</div>
  18.     <div class="items">2</div>
  19.     <div class="items">3</div>
  20.     <div class="items">4</div>
  21.     <div class="items">5</div>
  22.     <div class="items">6</div>
  23.     <div class="items">7</div>
  24.     <div class="items">8</div>
  25.     <div class="items">9</div>
  26. </div>
  27. </body>
  28. </html>
  • grid-template-area：命名网格区域名称，如图，把9个网格区域分别命名为 a、b、c、d、e、f、g、h、i；
示例图

html代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局属性案例</title>
  6.     <style>
  7.         .container {
  8.             display: grid;
  9.             grid-template-rows: repeat(3, 100px);
  10.             grid-template-columns: repeat(3, 100px);
  11.             grid-template-areas:'a b c' 'd e f' 'g h i';
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <div class="container">
  17.     <div class="items">1</div>
  18.     <div class="items">2</div>
  19.     <div class="items">3</div>
  20.     <div class="items">4</div>
  21.     <div class="items">5</div>
  22.     <div class="items">6</div>
  23.     <div class="items">7</div>
  24.     <div class="items">8</div>
  25.     <div class="items">9</div>
  26. </div>
  27. </body>
  28. </html>

2.2 创建隐式网格轨道

  • 定义：隐式网格轨道即 在一个Grid容器 中 子元素数量超过容器创建的网格时，浏览器自动创建网格来放子元素的网格叫隐式网格轨道，如图；

  • grid-auto-flow：column / rows ;：隐式网格子元素流动方向即排列顺序（默认先行后列）如图；

  • grid-auto-columns:数值：设置隐式网格列宽； grid-auto-rows:数值：设置隐式网格行高；重点：设置的宽度子元素必须有扩展空间否则无效，如图：
示例图

2.3 设置创建轨道空间

  • gird-column-gap 设置列间距， grid-row-gap 设置行间距， grid-gap： 行距 列距 前两者的简写， gap：10px; 超级简写列距行距都是10px,如图；
示例图

2.4 设置所有子元素在父元素中的对齐方式

  • justify-contens:start / end /cneter 有三个值 开始对齐，结束对齐，居中对齐 如图；
示例图

html代码示例:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局属性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.             /*居中对齐*/
  17.             /*justify-content: center;*/
  18.             /*从开始的地方对齐*/
  19.             /*justify-content: start;*/
  20.             /*结束的地方对齐*/
  21.             justify-content: end;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27. <div class="container">
  28.     <div class="items">1</div>
  29.     <div class="items">2</div>
  30.     <div class="items">3</div>
  31.     <div class="items">4</div>
  32.     <div class="items">5</div>
  33.     <div class="items">6</div>
  34.     <div class="items">7</div>
  35.     <div class="items">8</div>
  36.     <div class="items">9</div>
  37. </div>
  38. </body>
  39. </html>
  • align-content:start / end / conter ; 三个数值分别是子元素在父元素中垂直对齐方式，从开始地方，结束的地方，居中对齐，如图；
示例图

html 代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局属性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.             /*从开始的地方对齐*/
  17.             /*align-content: start;*/
  18.             /*居中对齐*/
  19.             /*align-content:center;*/
  20.             /*从结束的地方对齐*/
  21.             /*align-content:end;*/
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28. <div class="container">
  29.     <div class="items">1</div>
  30.     <div class="items">2</div>
  31.     <div class="items">3</div>
  32.     <div class="items">4</div>
  33.     <div class="items">5</div>
  34.     <div class="items">6</div>
  35.     <div class="items">7</div>
  36.     <div class="items">8</div>
  37.     <div class="items">9</div>
  39. </div>
  40. </body>
  41. </html>
  • place-content: 列 行 ；:是justify-content和justify-content:的缩写形式；

2.5 所有项目在单元格中的对齐方式；

  • justify-items: stretch / start / cneter / end ; 有四个数值，拉伸/开始的地方/居中/结束的地方，在行的方向对齐,默认会拉伸扩展，如图；
示例图

html代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局属性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.             /*所有项目在单元格在拉伸铺满*/
  17.             /*justify-items: stretch;*/
  18.             /*项所有目在单元格水平方向开始的地方对齐*/
  19.             /*justify-items:start;*/
  20.             /*所有项目在单元格水平方向居中对齐*/
  21.             /*justify-items: center;*/
  22.             /*所有项目在单元格水平方向在结束地方对齐*/
  23.             justify-items: end;
  24.         }
  25.         .container > div:first-of-type{
  26.             background-color: #55a532;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31. <div class="container">
  32.     <div class="items">1</div>
  33.     <div class="items">2</div>
  34.     <div class="items">3</div>
  35.     <div class="items">4</div>
  36.     <div class="items">5</div>
  37.     <div class="items">6</div>
  38.     <div class="items">7</div>
  39.     <div class="items">8</div>
  40.     <div class="items">9</div>
  41. </div>
  42. </body>
  43. </html>
  • aling-items: stretch / start / center / end ;有四个数值，拉伸/开始的地方/居中/结束的地方，在列的方向对齐,默认会拉伸扩展，如图；
示例图

html代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局属性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.            /*所有项目在单元格列的方向拉伸*/
  17.             /*align-items: stretch;*/
  18.             /*所有项目在单元格列的方向从开始的地方对齐*/
  19.             /*align-items: start;*/
  20.             /*所有项目在单元格方向居中对齐*/
  21.             /*align-items: center;*/
  22.             /*所有项目在单元格列方向结束的地方对齐*/
  23.             align-items: end;
  25.         }
  26.         .container > div:first-of-type{
  27.             background-color: #55a532;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32. <div class="container">
  33.     <div class="items">1</div>
  34.     <div class="items">2</div>
  35.     <div class="items">3</div>
  36.     <div class="items">4</div>
  37.     <div class="items">5</div>
  38.     <div class="items">6</div>
  39.     <div class="items">7</div>
  40.     <div class="items">8</div>
  41.     <div class="items">9</div>
  42. </div>
  43. </body>
  44. </html>
  • place-items: 列 行 是 justify-items和align-items 的简写模式；

3、Grid 项目属性

3.1 将项目放到单元格中

  • grid-column-start:列线号； 开始的列线号；
  • grid-column-end:列线号； 结束的列线号；

  • grid-column: 开始列线号 / 结束列线号 ； ,简写模式；

  • grid-row-start:行线号； 开始的行线号；

  • grid-row-end:行线号； 结束的行线号；
  • grid-row: 开始行线号 / 结束行线号； 简写模式；
    项目放单元格示例图,把项目1放到第一行，第一第二列内；
示例图

html 代码示例；
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局属性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.         }
  17.         .container > div:first-of-type{
  18.             background-color: #55a532;
  19.             grid-column-start: 1;
  20.             grid-column-end: 3;
  21.             grid-row-start: 1;
  22.             grid-row-end: 2;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27. <div class="container">
  28.     <div class="items">1</div>
  29.     <div class="items">2</div>
  30.     <div class="items">3</div>
  31.     <div class="items">4</div>
  32.     <div class="items">5</div>
  33.     <div class="items">6</div>
  34.     <div class="items">7</div>
  35.     <div class="items">8</div>
  36.     <div class="items">9</div>
  37. </div>
  38. </body>
  39. </html>

3.2 将项目放到网格区域中

  • grid-area: 上 / 左 / 下 / 右 ； 里面的值均为线号；如图；
示例图

html代码示例；
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局属性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.         }
  17.         .container > div:first-of-type{
  18.             background-color: #55a532;
  19.             grid-area: 1 / 1 / 3 / 3 ;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24. <div class="container">
  25.     <div class="items">1</div>
  26.     <div class="items">2</div>
  27.     <div class="items">3</div>
  28.     <div class="items">4</div>
  29.     <div class="items">5</div>
  30.     <div class="items">6</div>
  31.     <div class="items">7</div>
  32.     <div class="items">8</div>
  33.     <div class="items">9</div>
  34. </div>
  35. </body>
  36. </html>
  • grid-area: 区域名称； 把项目放在已经命名的区域中，如图；
示例图

html代码示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局属性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.             grid-template-areas:'a b c' 'd e f' 'g h i';
  17.         }
  18.         .container > div:first-of-type{
  19.             background-color: #55a532;
  20.             grid-area: e ;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25. <div class="container">
  26.     <div class="items">1</div>
  27.     <div class="items">2</div>
  28.     <div class="items">3</div>
  29.     <div class="items">4</div>
  30.     <div class="items">5</div>
  31.     <div class="items">6</div>
  32.     <div class="items">7</div>
  33.     <div class="items">8</div>
  34.     <div class="items">9</div>
  35. </div>
  36. </body>
  37. </html>

3.3 项目在单元格中的对齐方式

  • justify-self: start / center / end ; 单个项目在单元格中水平方向对齐方式，如图；
示例图

html代码示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局属性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.         }
  17.         .container > div:first-of-type{
  18.             background-color: #55a532;
  19.             /*默认方式从开始的地方对齐*/
  20.             /*justify-self: start;*/
  21.             /*居中对齐*/
  22.             /*justify-self: center;*/
  23.             /*从结束的地方对齐*/
  24.             justify-self: end;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <div class="container">
  30.     <div class="items">1</div>
  31.     <div class="items">2</div>
  32.     <div class="items">3</div>
  33.     <div class="items">4</div>
  34.     <div class="items">5</div>
  35.     <div class="items">6</div>
  36.     <div class="items">7</div>
  37.     <div class="items">8</div>
  38.     <div class="items">9</div>
  39. </div>
  40. </body>
  41. </html>
  • align-self: start / center / end ; 单个项目在单元格中 垂直方向的对齐方式,如图；
示例图

html 代码示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局属性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.         }
  17.         .container > div:first-of-type{
  18.             background-color: #55a532;
  19.             /*默认方式从开始的地方对齐*/
  20.             /*align-self: start;*/
  21.             /*居中对齐*/
  22.             /*align-self: center;*/
  23.             /*从结束的地方对齐*/
  24.             align-self: end;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <div class="container">
  30.     <div class="items">1</div>
  31.     <div class="items">2</div>
  32.     <div class="items">3</div>
  33.     <div class="items">4</div>
  34.     <div class="items">5</div>
  35.     <div class="items">6</div>
  36.     <div class="items">7</div>
  37.     <div class="items">8</div>
  38.     <div class="items">9</div>
  39. </div>
  40. </body>
  41. </html>
  • place-self:垂直方向 水平方向 单个项目在单元格对齐方式的简写，如图；
示例图

html 代码示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局属性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.         }
  17.         .container > div:first-of-type{
  18.             background-color: #55a532;
  19.             /*place-self:垂直方向 水平方向 单个项目在单元格对齐方式的简写*/
  20.             place-self: center end;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25. <div class="container">
  26.     <div class="items">1</div>
  27.     <div class="items">2</div>
  28.     <div class="items">3</div>
  29.     <div class="items">4</div>
  30.     <div class="items">5</div>
  31.     <div class="items">6</div>
  32.     <div class="items">7</div>
  33.     <div class="items">8</div>
  34.     <div class="items">9</div>
  35. </div>
  36. </body>
  37. </html>

总结

  • grid 和 flex 大致的差不太多，因为都能从大局和细节处理和控制每一个元素，所以本质上并没有太多的差别；

  • grid 属性命名上容易和flex 记混淆，多写、多用，灵活运用和穿插应用会提高认知度；

  • 记忆 justify 是水平方向，align 是垂直方向，排列值为start center end；

  • column 是列 row 是行，涉及多行和多列 加s;

  • content 是容器 item 是项目 self 是自身；

  • auto 是自动创建的隐式轨道；

  • 所有创建和放置类属性值前加上类名grid；

附：手写grid属性

上一条：商城购物车页面与结算页面实战----PHP培训十期线上班下一条：12月25日_AJAX请求
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多