Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid布局基础
Blogger Information
Blog 17
fans 0
comment 0
visits 13601
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
grid布局基础
ROC-Y
Original
964 people have browsed it

创建grid容器display: grid

1.设置填充方式

  • 默认行/列优先 grid-auto-flow : row / column /
  • 显式的划分行与列：
    • grid-template-columns：
    • grid-template-rows
  • 对于放不下的项目，会隐式的生成单元格
    1. <style>
    2.       .container {
    3.           background: lightcyan;
    4.           width: 400px;
    5.           height: 400px;
    6.           display: grid;
    7.           /* 按列布局 */
    8.           grid-auto-flow: column;
    9.           grid-template-rows: 100px 100px 100px;
    10.       }
    11.       .items {
    12.           background: lightblue;
    13.       }
    14.   </style>

2.设置单元格的大小与数量

  • 属性：
    • grid-template-columns：
    • grid-template-rows
  • 值：以三行三列为例
    • 固定值 100px 100px 100px
    • 百分比 20% 30% auto
    • 比例 1fr auto 2fr
    • 重复设置 repeat(3,100px)
    • 按分组设置 repeat(2,50px,100px)
    • 弹性设置 repeat(2,minmax(50px , 100px))
    • 自动填充 repeat(auto-fill ,100px)

  • 举例：自动填充

    1. <style>
    2.       .container {
    3.           background: lightcyan;
    4.           width: 400px;
    5.           height: 400px;
    6.           display: grid;
    7.           /* 自动填充 */
    8.           grid-template-columns: repeat(auto-fill, 100px);
    9.           grid-template-rows: repeat(auto-fill, 100px);
    10.       }     
    11.       .items {
    12.           background: lightblue;
    13.       }
    14.   </style>

3.根据默认的网格线划分

  • 属性
    • grid-row-start
    • grid-row-end
    • grid-column-start
    • grid-column-end
  • 值
    • 从左往右，从上往下，对线编号：1 —— n 或者 -n —— -1
  • 简写
    • 属性 grid-row: 1/3 ; grid-column: 3 / 5 ;
    • 偏移量来简化 grid-row: 1/span 2;

  • 举例：

    1.   <style>
    2.       .container {
    3.           background: lightcyan;
    4.           width: 400px;
    5.           height: 400px;
    6.           display: grid;
    7.           /* 重复设置 */
    8.           grid-template-columns: repeat(4, 1fr);
    9.           grid-template-rows: repeat(4, 1fr);
    10.       }
    11.             .items {
    12.           background: lightblue;
    13.       }
    14.       /* 第三行开始占2行，从第一条列线到第二条，占一列 */  
    15.       .items.item3 {
    16.           background-color: aqua;
    17.           grid-row: 3/ span2;
    18.           grid-column: 1 / 2;
    19.       }
    20.   </style>

4.使用命名网格线划分单元格

  • 属性 grid-template-columns:/grid-template-columns:
  • 值：[c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end]
  • 同样可以参照网格线进行简写

5.默认网格区域

  • 属性： grid-area
  • 常规4值 使用线标或者线名 1 / 1/ 2/ 5;
  • 从当前位置填充 grid-area: span 1 / span 4;
  • 举例
    1.   <style>
    2.       .container {
    3.           background: lightcyan;
    4.           width: 400px;
    5.           height: 400px;
    6.           display: grid;
    7.           /* 重复*/
    8.           grid-template-columns: repeat(4, 1fr);
    9.           grid-template-rows: repeat(4, 1fr);
    10.       }  
    11.       .items {
    12.           background: lightblue;
    13.       }
    14.       /* 第三格子从第一条行线到第4条，占2行，从第二列线，到第四列线，占2列 */   
    15.       .items.item3 {
    16.           background-color: aqua;
    17.           grid-area: 2/2/4/4;
    18.       }
    19.   </style>

6.命名网格区域

  • 属性：grid-template-areas:,相同名称区域会合并
  • 值：以三行三列举例
    1.   <style>
    2.       .container {
    3.           background: lightcyan;
    4.           width: 400px;
    5.           height: 400px;
    6.           display: grid;
    7.           grid-template-columns: repeat(3, 1fr);
    8.           grid-template-rows: 40px 1fr 40px;
    9.           grid-template-areas: 
    10.           "header header header" 
    11.           "left main right" 
    12.           "footer  footer footer";
    13.       }     
    14.       .items {
    15.           background: lightblue;
    16.       }
    17.       /* 第三格子设置到left命名区域 */    
    18.       .items.item3 {
    19.           background-color: aqua;
    20.           grid-area: left;
    21.       }
    22.       /* 将第五格子设置为footer区域，同名区域合并 */     
    23.       .items.item5 {
    24.           background-color: red;
    25.           grid-area: footer;
    26.       }
    27.   </style>

7.网格区域占位符

  • 使用 . 来占一格位置

8.网格区域线的默认名称

  • 配合网格命名，命名之后的，根据命名格的起始，来设置指定单元格位置
    1.   <style>
    2.       .container {
    3.           background: lightcyan;
    4.           width: 400px;
    5.           height: 400px;
    6.           display: grid;
    7.           grid-template-columns: repeat(2, 1fr);
    8.           grid-template-rows: 40px 1fr 40px;
    9.           grid-template-areas: "header  header" ". ." "footer  footer";
    10.       }     
    11.       .items {
    12.           background: lightblue;
    13.       }
    14.       /* 第1格子设置通过hearder区域线名 */       
    15.       .items.item1 {
    16.           background-color: aqua;
    17.           /*起始行/起始列/结束行/结束列*/
    18.           grid-area: header-start / header-start / header-end /header-end;
    19.       }
    20.       /* 将第4格子设置为footer区域，同名区域合并 */       
    21.       .items.item4 {
    22.           background-color: red;
    23.           grid-area: footer-start /footer-start /footer-end/footer-end;
    24.       }
    25.   </style>

9.设置单元格在容器中的对齐方式

  • 水平对其 justify-content:
  • 垂直对其 align-content:
  • 简写：place-content:垂直值 水平值；
  • 属性默认值：拉伸stretch
  • 其他值：start/end/center/space-bwteen/space-around/space-evenly
  1.  <style>
  2.         .container {
  3.             background: lightcyan;
  4.             width: 500px;
  5.             height: 500px;
  6.             display: grid;
  7.             grid-template-columns: repeat(3, 50px);
  8.             grid-template-rows: 50px 50px 50px;
  9.             /* 水平均匀分布 */
  10.             /* justify-content: space-evenly;
  11.             /* 垂直2端对齐 */
  12.             /* align-content: space-between; */
  13.             /*值顺序是水平对其/垂直对齐*/
  14.             place-content: space-between space-evenly;
  15.             }  
  16.         .items {
  17.             background: lightblue;
  18.         }
  19.     </style>

10.设置项目在单元格中的对齐方式

  • 属性：justify-items/align-items
  • 简写：place-items

  • 值：默认stretch, start,end,center

    1.  <style>
    2.       .container {
    3.           background: lightcyan;
    4.           width: 500px;
    5.           height: 500px;
    6.           display: grid;
    7.           grid-template-columns: repeat(3, 1fr);
    8.           grid-template-rows: repeat(3, 1fr);
    9.           /* 水平处于下方 */
    10.           /* justify-items: end;
    11.           /* 垂直居中 */
    12.           /* align-items: center; */
    13.           /*值顺序是水平/垂直*/
    14.           place-items: end center;
    15.       }
    17.       .items {
    18.           background: lightblue;
    19.           width: 50px;
    20.           height: 50px;
    21.       }
    22.   </style>

    11.设置某个项目在单元格中的对齐方式

  • 属性：justify-self/align-self
  • 简写：place-self
  • 值： start,end,center
  • 举例：基于第10点项目样式，再来设置具体一格的属性，例如设置第5个项目居中 。
    1. .items.item5 {
    2.           background: yellow;
    3.           place-self:center center;
    4.       }

12.设置单元格间距

  • 属性：row-gap/column-gap
  • 简写：gap: 行间距/列间距
  • 不能使用padding，margin,因为会导致2格之间间距相加
    1.   <style>
    2.       .container {
    3.           background: lightcyan;
    4.           width: 500px;
    5.           height: 500px;
    6.           display: grid;
    7.           grid-template-columns: repeat(3, 1fr);
    8.           grid-template-rows: repeat(3, 1fr);
    9.           /*值顺序是行/列*/
    10.           gap: 10px 15px;
    11.       }    
    12.       .items {
    13.           background: lightblue;
    14.       }
    15.   </style>

总结

  • 学习grid布局的单元格数量设置，网格的命名以及单元格和元素的对齐
  • 对齐方式与flex类似，特别注意xx-content,xx-items,xx-self的不同含义，content是设置单元格对齐，items是设置项目在单元格的对齐，这2个属性设置都是在是在上层容器中设置。self是单独针对某一个项目设置在对应单元格中的对齐，属性设置位置是在自身单元格中设置。
  • gap属性设置单元格间距，与padding和margin区别。
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：有了grid, 是不是可以放弃好多东西了
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