search

博客列表 >手把手玩转Grid网格布局

手把手玩转Grid网格布局

Jason Pu?
Jason Pu?原创
2020年12月25日 11:44:141292浏览

一:grid风格布局是什么？

Grid网格布局是flex弹性盒子后又一个强大的 CSS 布局方案，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
常用属性：

属性 说明
display 设置grid布局
grid-template-rows 设置网格的行数
grid-template-columns 设置网格的列数
gap 设置轨道间距
grid-auto-rows 设置隐藏风格的宽
gird-auto-columns 设置隐藏风格的高
grid-auto-flow 设置网格排列方向,row行，column列
grid-area 设置任何一个项目所在的网格单元的区域，四个值分别是：哪根横线开始，哪根竖线开始，哪根横线结束，哪根竖线结束

二：基本概念：

1.容器和项目：采用网格布局的区域，称为“容器”。容器内部的采用网格定位的子元素称为“项目”
下面的代码中，wrapper就是grid容器，item就是gird项目

  1.     <style>
  2.         .wrapper{
  3.             display: grid;
  4.             grid-template-columns:5em 5em 5em ;
  5.             grid-template-rows: 5em 5em;
  6.         }
  7.         .item{
  8.             border: 1px solid #000;
  9.             text-align: center;
  10.             line-height: 5em;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <div class="wrapper">
  16.     <div class="item">1</div>
  17.     <div class="item">2</div>
  18.     <div class="item">3</div>
  19.     <div class="item">4</div>
  20.     <div class="item">5</div>
  21.     <div class="item">6</div>
  22. </div>

2.行、列和单元格
容器里面的水平区域称为“行”，垂直区域称为“列”，行列重叠出来的空间组成单元格

  1. grid-template-columns:5em 5em 5em ;
  2. grid-template-rows: 5em 5em;

以上代码我们用grid-template-columns设置了三列列高分别为5em，用grid-template-rows设置了2行行宽分别为5em的格子，当然我们可以通过repeat()函数进行简写：

  1. grid-template-columns:repeat(3,5em);
  2. grid-template-rows: repeat(2,5em);

repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。
第二个参数可以接受多个参数，例如

  1. grid-template-columns: repeat(2, 100px 20px 80px);

我们把上面的代码进行展开就是：

  1. grid-template-columns: 100px 20px 80px 100px 20px 80px;

常用的第二个函数就是minmax()，顾名生义，就是这个函数可以接受一个最小值和一个最大值，对我们设置局部响应式带了来福音
例如：做一个两侧固定，中间最小20em最大可以自动变大的格子

  1. <style>
  2.         .wrapper{
  3.             display: grid;
  4.             /* 中间的格子最小为20em，最大自动 */
  5.             grid-template-columns:10em minmax(20em,auto) 10em;
  6.             grid-template-rows: 20em;
  7.         }
  8.         .item{
  9.             border: 1px solid #000;
  10.             text-align: center;
  11.             line-height: 5em;
  12.         }
  13.         .item:nth-of-type(2){
  14.             background-color:red;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <div class="wrapper">
  20.     <div class="item">1</div>
  21.     <div class="item">2</div>
  22.     <div class="item">3</div>
  24. </div>

通过运行后发现，无轮如何缩小浏览器，中间的列始终最小保持20em宽度，而最大值是可以减掉两边固定宽度后自动调整的

当然为了美化我们的项目，传统我们往往会设置用marging，padding为盒子与盒子之间设置间距，在grid网格当中，就省事多了，直接用”gap”就可以解烦忧，举个粟子吧：

  1.  .wrapper{
  2.             display: grid;
  3.             grid-template-columns:repeat(3,10em);
  4.             grid-template-rows: repeat(2,10em);
  5.             /* 行间距0.5em,列间距：0.2em */
  6.             gap: .5em .2em;
  7.         }
  8.         .item{
  9.             border: 1px solid #000;
  10.             text-align: center;
  11.             line-height: 5em;
  12.         }
  13.         .item:first-of-type{
  14.             background-color:skyblue;
  15.         }
  16.         .item:nth-of-type(2){
  17.             background-color:red;
  18.         }
  19.         .item:nth-of-type(3){
  20.             background-color:lightgreen;
  21.         }
  22.         .item:nth-of-type(4){
  23.             background-color:lightcyan;
  24.         }
  25.         .item:nth-of-type(5){
  26.             background-color:yellowgreen;
  27.         }
  29.         .item:last-of-type{
  30.             background-color:lightslategrey;
  31.         }
  33.     </style>
  34. </head>
  35. <body>
  36. <div class="wrapper">
  37.     <div class="item">1</div>
  38.     <div class="item">2</div>
  39.     <div class="item">3</div>
  40.     <div class="item">4</div>
  41.     <div class="item">5</div>
  42.     <div class="item">6</div>
  44. </div>

运行结果如下：

同时我们还可以用grid-auto-flow来设置网格的排列方式，默认值是row，还是上面的代码，我们把它改成column试试

  1. grid-auto-flow: column;

运行后发现，排列方式以列优先了

3:显式轨道和隐式轨道
以下的代码，我们只设置了3行2列，我们再在下面添加3个，多出了3个会，原来的项目我们称之为显式轨道，新增的我们称之为隐式轨道

  1. <style>
  2.         .wrapper{
  3.             display: grid;
  4.             /* 只设置了3列2行的网格 */
  5.             grid-template-columns:repeat(3,10em);
  6.             grid-template-rows: repeat(2,10em);
  7.             gap: .2em;
  8.         }
  9.         .item{
  10.             border: 1px solid #000;
  11.             text-align: center;
  12.             padding: 0.2em;
  13.             background-color: skyblue;
  15.         }
  18.     </style>
  19. </head>
  20. <body>
  21. <div class="wrapper">
  22.     <div class="item">1</div>
  23.     <div class="item">2</div>
  24.     <div class="item">3</div>
  25.     <div class="item">4</div>
  26.     <div class="item">5</div>
  27.     <div class="item">6</div>
  28.     <div class="item">7</div>
  29.     <div class="item">8</div>
  30.     <div class="item">9</div>
  31. </div>
  32. </body>

运行后我们发现隐式轨道的高度是自动生成的，与原来的显式轨道格格不入

这个时候我们可以通过grid-auto-rows来给隐式轨道设置行高，如果是grid-auto-flow:column; 我们就可以通过grid-auto-columns给轨道设置列宽
下面我们把隐式轨道的行高设置的和显式轨道的一样

  1. grid-auto-rows:10em ;

运行后发现果然一样了

4.网格线：划分网格的线，称为”网格线“
黄色的代表是列的网格线，绿色代表的是行的网格线

通过网格线我们可以利用grid-area设置任何一个项目所在的网格单元区域，grid-area有四个值分别是：哪根横线开始，哪根竖线开始，哪根横线结束，哪根竖线结束
例如：

  1. <style>
  2.         .wrapper{
  3.             display: grid;
  4.             /* 只设置了3列2行的网格 */
  5.             grid-template-columns:repeat(3,5em);
  6.             grid-template-rows: repeat(3,5em);
  7.             gap: .2em;
  9.         }
  10.         .item{
  11.             border: 1px solid #000;
  12.             text-align: center;
  13.             line-height: 5em;
  14.             padding: 0.2em;
  15.             background-color: skyblue;
  17.         }
  18.         .item:first-of-type{
  19.             background-color: red;
  20.             /* 设置第一个item的起始为第一根横线，起始列为第一根竖线，结束为第1根横线，结果为第4根竖线，
  21.             也就是占了一行三列 */
  22.             grid-area:1/1/1/4;
  23.             /* 我们也可以通过span进行跨行跨列操作，例如： */
  24.             grid-area:1/1/span 1/span 3;
  25.             /* 甚至可以省掉前面的1/1：从当前行列开始跨一行三列 */
  26.             grid-area:span 1 /span 3;
  27.         }
  30.     </style>
  31. </head>
  32. <body>
  33. <div class="wrapper">
  34.     <div class="item">1</div>
  35.     <div class="item">2</div>
  36.     <div class="item">3</div>
  37.     <div class="item">4</div>
  38.     <div class="item">5</div>
  39.     <div class="item">6</div>
  40.     <div class="item">7</div>
  41.     <div class="item">8</div>
  42.     <div class="item">9</div>
  43. </div>

运行的结果如下

上一条：1224-实例演示全部grid属性下一条：wordpress调用文章摘要判断文章无摘要自动截取文章内容
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议