search

博客列表 >grid布局基础

grid布局基础

ROC-Y
ROC-Y原创
2020年04月19日 22:27:05963浏览

创建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区别。
上一条：PHP基础2下一条：php常量和变量
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多