Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12-30作业：Grid属性示例
Blogger Information
Blog 9
fans 3
comment 0
visits 11052
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
12-30作业：Grid属性示例
十年一梦
Original
928 people have browsed it

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属性

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：完成的相当出色, 达到与我们自己的专业技术编辑发文水准了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post