简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML之grid布局
Blogger Information
Blog 36
fans 1
comment 0
visits 29322
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
HTML之grid布局
Jason
Original
1228 people have browsed it

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框架，也只是万里长征的第一步，还有更多的知识等着我去学习。去向更好出发。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：不是99%, 是100%, 任何页面在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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！