search

博客列表 >HTML之grid布局

HTML之grid布局

Jason
Jason原创
2020年04月15日 00:35:401249浏览

grid布局

grid布局是什么？

简单的说，就是在flex布局的基础上加了一个轴，flex同时只能设置一个方向，grid布局却能同时设置两个方向，就好比我们现实生活中的坐标轴，flex布局一次只能走一条线，要么x,要么y，非常的单一，在布局一些单行或单列的布局时，非常的占优势，而grid布局，能够两条线一起走，同时进行，在对页面的整体布局时，优势就体现出来了，一个好的页面，一定是将两者合二为一，互相取长补短，才能算是一个好的前端。下面来用案例来介绍一下grid的属性。

1. 设置grid容器

  1.         /* 设置显示为grad */
  2.         display: grid;
  4.         /* 默认显示为行 */
  5.         grid-auto-flow: row;
  6.         /* 修改为列显示 */
  7.         grid-auto-flow: column;
  9.         /* 显示为三行三列 */
  10.         grid-template-columns: 100px 100px 100px;
  11.         grid-template-rows: 200px 200px;
  13.         /* 对于放不下的项目，会掩式生成单元格 */
  14.         grid-auto-rows: auto;
  15.         /* grid-auto-rows: auto; */

效果图

2.设置单元格大小

  1.         /* 显示为三行三列 */
  2.         grid-template-columns: 100px 100px 100px;
  3.         grid-template-rows: 100px 100px 100px;
  6.         /* 用百分比来设置 */
  7.         grid-template-columns: 20% 30% auto;
  8.         grid-template-rows: 100px auto 100px;
  10.         /* 用比例来设置 */
  11.         grid-template-columns: 1fr 1fr 1fr;
  12.         grid-template-rows: 2fr 1fr 1fr;
  14.         /* 重复设置 */
  15.         grid-template-columns: repeat(3, 100px);
  16.         grid-template-rows: repeat(3, 100px);
  18.         /* 按分组来设置 */
  19.         grid-template-columns: repeat(2, 50px 100px);
  21.         /* 弹性设置大小 */
  22.         grid-template-columns: repeat(3, minmax(20px,200px));
  23.         grid-template-rows: repeat(3, minmax(20,200px));
  25.         /* 自动填充 */
  26.         grid-template-columns: repeat(auto-fill, 120px);
  27.         grid-template-rows: repeat(auto-fill, 100px);

效果图

  1. ![](https://img.php.cn/upload/image/306/657/508/1586880483267108.jpg)

3.用网格线划分单元格

  1. .item.item1 {
  2.         grid-row-start: 1;
  3.         grid-row-end: 3;
  4.         grid-column-start:1;
  5.         grid-column-end: 3;
  7.         grid-row-start: -1;
  8.         grid-row-end: -4;
  9.         grid-column-start: -1;
  10.         grid-column-end: -3;
  12.         grid-row-start: 2;
  13.         grid-row-end: 4;
  14.         grid-column-start:2;
  15.         grid-column-end:4;
  17.         /* 简写 */
  18.         grid-row: 1 / 3;
  19.         grid-column: 1 / 2;
  21.     }
  22.     .item.item4{
  23.         background-color:maroon;
  24.         grid-column: 2 / span 3;
  25.     }
  27.     .item.item5 {
  28.         background-color:limegreen;
  29.         grid-row-start: span 1;
  30.         grid-column-end: span 2; 
  31.     }

效果图

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

  1.  .container {
  2.         width: 400px;
  3.         height: 400px;
  4.         background-color: lightblue;
  6.         display: grid;
  7.         grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c3-start c3-end]  100px;
  8.         grid-template-rows: [r1-start] 100px [r1-end r2-start]  100px [r2-end r3-start] 100px;
  9.     }
  11.     .item {
  12.         /* 设置字体是默认字体的两倍 */
  13.         font-size: 2rem;
  14.     }
  16.     .item.item1 {
  17.         background-color: lightpink;
  18.         grid-column-start: c2-start;
  19.         grid-column-end: c3-start;
  20.         grid-row-start: r1-start;
  21.         grid-row-end: r2-end;
  22.     }
  24.     .item.item3 {
  25.         background-color: lightsalmon;
  26.         grid-row-end: span 2;
  27.         grid-column-end: span 2;
  28.     }
  30.     .item.item4 {
  31.         background-color: lightslategray;
  32.     }
  34.   }

效果图

5.默认网格区域

  1.  .container {
  2.     /* 容器大小 */
  3.     width: 400px;
  4.     height: 400px;
  5.     background-color: wheat;
  7.     /* 创建grid容器 */
  8.     display: grid;
  9.     grid-template-columns: repeat(4, 1fr);
  10.     grid-template-rows: repeat(4, 1fr);
  11.   }
  13.   .item {
  14.     font-size: 2rem;
  15.   }
  16.   .item.item1 {
  17.     background-color: lightgreen;
  18.     /* grid-area: 1 / 1 / 2 / 5; */
  19.     /* 用偏移量进行简化 */
  20.     /* grid-area: 1 / 1 / span 1 / span 4; */
  21.     /* 是从当前位置开始的填充 */
  22.     grid-area: span 1 / span 4;
  23.   }
  25.   /* 简写 */
  26.   .item.item2 {
  27.     background-color: lightpink;
  29.     /* grid-area: 2 / 1 / 4 / 2; */
  30.     /* grid-area: span 2 / span 1; */
  31.     /* 默认就是偏移一行/一列 */
  32.     grid-area: span 2;
  33.   }
  35.   /* 使用偏移量来简化, 将第三个移动到左下角 */
  36.   .item.item3 {
  37.     background-color: yellow;
  38.   }
  40.   .item.item4 {
  41.     background-color: lightgrey;
  42.     /* grid-area: row-start / col-start / row-end / col-end; */
  43.   }
  44.   .item.item5 {
  45.     background-color: violet;
  46.   }

效果图

6.划分网格区域

  1.   .container {
  2.         /* 设置容器大小 */
  3.         width: 600px;
  4.         height: 600px;
  5.         background-color: lightslategray;
  7.         /* 创建grid容器 */
  8.         display: grid;
  9.         grid-template-columns: 100px 1fr 100px;
  10.         grid-template-rows: 40px 1fr 40px;
  12.         grid-template-areas:
  13.          "header header header"
  14.          "left main right"
  15.          "footer footer footer";
  18.     }

效果图

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

  1. .container {
  2.         /* 设置容器大小 */
  3.         width: 800px;
  4.         height: 800px;
  5.         background-color: lightslategray;
  7.         /* 创建grid容器 */
  8.         display: grid;
  9.         grid-template-columns: repeat( 3 , 200px);
  10.         grid-template-rows: repeat( 3 , 200px);
  12.         /* 设置对齐方式 */
  13.         justify-content: end;
  14.         align-content:end;
  16.         justify-content: center;
  17.         align-content: center;
  19.         justify-content: space-between;
  20.         justify-content: space-around;
  21.         justify-content: space-evenly;
  23.         align-content: space-between;
  24.         align-content: space-around;
  25.         align-content: space-evenly;
  27.         /* 垂直对齐 水平对齐 */
  28.         place-content: center start;
  29.         place-content: center center;
  30.         place-content: center;
  31.     }

效果图

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

  1.   .container {
  2.         /* 设置容器大小 */
  3.         width: 600px;
  4.         height: 600px;
  5.         background-color: lightslategray;
  7.         /* 创建grid容器 */
  8.         display: grid;
  9.         grid-template-columns: repeat(3,1fr);
  10.         grid-template-rows: repeat(3,1fr);
  12.         justify-items: stretch;
  13.         align-items: stretch;
  15.         justify-items: end;
  16.         align-items: center;
  18.         justify-items: center;
  19.         align-items: center;
  21.         /* 垂直 水平 */
  22.         place-items: start end;
  23.         place-items: center center;
  24.         place-items: center;
  26.     }

效果图

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

  1.     .item {
  2.         /* 设置字体是默认字体的两倍 */
  3.         font-size: 2rem;
  4.     }
  6.     .item.item5{
  7.         justify-self: end;
  8.         align-self: end;
  10.         place-self: center end;
  12.     }

效果图

10.设置单元格间距

  1. .container {
  2.         /* 设置容器大小 */
  3.         width: 400px;
  4.         height: 400px;
  5.         background-color: lightslategray;
  7.         /* 创建grid容器 */
  8.         display: grid;
  9.         grid-template-columns: repeat(3,1fr);
  10.         grid-template-rows: repeat(3,1fr);
  12.         /* 调整间距 */
  13.         column-gap: 5px;
  14.         row-gap: 15px;
  16.         /* gap: 列间距 行间距 */
  17.         gap: 15px 5px;
  18.         gap: 5px;          
  19.     }

效果图

总结

总的来说用grid来搭建框架，非常的方便快捷，像一些市面上的网站，基本上都可以用grid布局来实现，配合着flex,两个可以说是无敌了，可以把99%的网站页面做出来，虽然只讲了grid的基本属性，但配合着案例，让我见识到了它的强大，学习了grid框架，也只是万里长征的第一步，还有更多的知识等着我去学习。去向更好出发。

上一条：Go环境安装、配置下一条：flex属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多