手记

CSS:玩转grid布局

grid介绍

针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式,而Grid最大的特色,是一个基于网格的二维布局系统,目的是用来优化用户界面设计。

1.启用grid容器

我们使用display属性来定义一个网格容器,它的grid值决定了容器展现为块级还是内联形式。一旦启用网格容器,它的所有子元素都进入grid文档流,称为网格子项。

display: grid | inline-grid | subgrid
  • grid:定义一个块级的网格容器

  • inline-grid:定义一个内联的网格容器

  • subgrid:定义一个继承其父级网格容器的行和列的大小的网格容器,它是其父级网格容器的一个子项。

tips: column, float, clear和vertical-align对网格容器没有效果。

2、网格容器的属性

2.1grid-template-columns/grid-template-rows

用法:

grid-template-columns: <track-size> ... | <line-name> <track-size> ...; 
grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
  • <track-size>:定义网格单元的宽高,其单位可以是一个长度(如px、em、rem、vw、vh)或百分比,也可以是网格中自由空间的份数(单位为fr)。

  • <line-name>:定义网格线的名称,它不是必须值。可以一个你选择的任意名字,当没有显示设定时,它的名字以数字表示。

实例:

css:

    .container {        
        width: 500px;        
        height: 500px;
        display: grid;     
        grid-template-columns: 33% 33% 33%;         
        grid-template-rows: 33% 33% 33%;     
    }    
    .container div { 
       border: 1px solid #000;    
    }


html:

    <div class="container">
     <div></div>        
     <div></div>        
     <div></div>        
     <div></div>        
     <div></div>        
     <div></div>        
     <div></div>        
     <div></div>        
     <div></div>    
    </div>


最终效果


也可以通过命名来写效果一样,多个命名的话要加上空格隔开

.container{
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

如果你定义了容器的重复部分,你可以使用repeat()方法来生成多个相同值:

.container{
  grid-template-columns: repeat(3, 33%);  
}
/* 等价于 */
.container{
  grid-template-columns: 33% 33% 33%
}

特殊单元:frfr单元允许你将网格容器中的自由空间设置为一个份数:

.container{
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(3, 1fr); 
}

在上面的代码中,将网格容器的每个子项设置为三分之一。

上边这个是平均分成三份比设为33%要好很多,效果图也差不多。

tips:自由空间是在固定子项确定后开始计算的.

2.2 grid-template-areas

grid-template-areas可以配合grid-area定义一个显式的网格区域。grid-template-areas定义网格区域,然后使用grid-area调用声明好的网格区域名称来放置对应的网格项目。
用法:

grid-template-areas: "<grid-area-name> | . | none | ..." "..."
  • <grid-area-name>:在grid-area中指定的网格区域名字

  • .:一个句点表示一个空的网格单元

  • none:没有网格区域被定义

实例:

css:

    .item-a{
      grid-area: header;
      background: black;
    }       
    .item-b{
      grid-area: main;
      background: blue;
    }       
    .item-c{
      grid-area: sidebar;
      background: chartreuse;
    }       
    .item-d{           
      grid-area: footer;        
      background: red;     
    }   
    .container{         
      width: 500px;     
      height:200px;           
      margin-top: 20px;     
      display:grid;        
      grid-template-columns: 1fr 1fr 1fr 1fr;        
      grid-template-rows: 1fr 1fr 1fr;        
      grid-template-areas: "header header . footer" 
                            "main main . sidebar" 
                            "main main . sidebar";  
      }


html:

    <div class="container">
     <div class="item-a"></div>               
     <div class="item-b"></div>               
     <div class="item-c"></div>               
     <div class="item-d"></div>           
    </div>


最终效果


2.3 grid-column-gap/grid-row-gap/grid-gap

指定网格线的大小,也可以说是网格子项之间的间距。词法:

grid-column-gap: <line-size>grid-row-gap: <line-size>
  • <line-size>:长度值

grid-gap是grid-column-gapgrid-row-gap的简称:

grid-gap: <grid-column-gap> <grid-row-gap>

如果只有一个值,grid-row-gap的值将和grid-column-gap一样。

实例:

css:

    .container {        
      width: 500px;        
      height: 500px;        
      display: grid;        
      grid-template-columns: repeat(3, 30%);        
      grid-template-rows: repeat(3, 30%);        
      grid-column-gap: 2%;        
      grid-row-gap: 2%;    
    }


html:

     <div class="container">        
         <div></div>        
         <div></div>        
         <div></div>        
         <div></div>        
         <div></div>        
         <div></div>        
         <div></div>        
         <div></div>        
         <div></div>    
      </div>

最终效果


2.4 justify-items/align-items

justify-items让网格子项的内容和列轴对齐(align-items则相反,是和行轴对齐),这个值对容器里面的所有网格子项都有用,flex里边没有这个属性。

justify-items: start | end | center | stretch


  • start:内容和网格区域的左边对齐

  • end:内容和网格区域的右边对齐

  • center:内容和网格区域的中间对齐

  • stretch:填充整个网格区域的宽度(默认值)


align-items

让网格子项的内容和行轴对齐,这个值对容器里面的所有网格子项都有用。

align-items: start | end | center | stretch;
  • start:内容和网格区域的顶部对齐

  • end:内容和网格区域的底部对齐

  • center:内容和网格区域的中间对齐

  • stretch:填充整个网格区域的高度(默认值)


2.5 justify-content/align-content

justify-content如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格容器,这时候你可以设置网格的对齐方式(垂直于列网格线对齐)。

justify-content: start | end | center | stretch | space-around 
| space-between | space-evenly ;
  • start:左对齐

  • end:右对齐

  • center:居中对齐

  • stretch:填充网格容器

  • space-around:在每个网格子项中间放置均等的空间,在始末两端只有一半大小

  • space-between:两边对齐,在每个网格子项中间放置均等的空间,在始末两端没有空间

  • space-evenly:网格间隔相等,包括始末两端

align-content如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格容器,这时候你可以设置网格的对齐方式(垂直于行网格线对齐)。

align-content: start | end | center | stretch | space-around | space-between 
| space-evenly
  • start:顶部对齐

  • end:底部对齐

  • center:居中对齐

  • stretch:填充网格容器

  • space-around:在每个网格子项中间放置均等的空间,在始末两端只有一半大小

  • space-between:上下对齐,在每个网格子项中间放置均等的空间,在始末两端没有空间

  • space-evenly:在每个网格子项中间放置均等的空间,包括始末两端

上边的属性除了justify-items之外其余的属性flex都有这个我就不举例了。

2.6 grid-auto-columns/grid-auto-rows

自动生成隐式网格轨道(列和行),当你定位网格项超出网格容器范围时,将自动创建隐式网格轨道。

grid-auto-columns: <track-size>
grid-auto-rows: <track-size>
  • <track-size>:可以是一个长度,百分比或者是一个网格中自由空间的份数(通过使用fr单位)

为了说明隐式网格轨迹如何被创建,思考一下这个:

.container{       
    display: grid;        
    grid-template-columns: 60px 60px;          
    grid-template-rows: 90px 90px   
 }

我们创建了一个2*2的网格

但现在想象你使用grid-column和grid-row来定位你的网格子项,就像这样:

.item-a{     
    grid-column: 1 / 2;     
    grid-row: 2 / 3;  
}  
.item-b{     
    grid-column: 5 / 6;     
    grid-row: 2 / 3;  
}


 
我们告诉.item-b在第 5 列网格线开始第 6 列网格线结束,但我们还没有定义第 5 或者第 6 列。因为我们引用的线不存在,0 宽度的隐式网格轨迹将被创建来填充这些空缺。我们可以使用grid-auto-columnsgrid-auto-rows来指定这些隐式网格轨迹的宽度:

.container{     
    grid-auto-columns: 60px;  
}



实例:

css:

    .container3 {        
        display: grid;        
        grid-template-columns: 60px 60px;           
        grid-template-rows: 90px 90px;          
        grid-auto-columns: 60px;      
    }      
    .item1{           
        background: red;        
        grid-column: 1 / 2;           
        grid-row: 2 / 3;      
      }       
      .item2{           
          background: green;        
          grid-column: 5 / 6;           
          grid-row: 2 / 3;      
      }


html:

    <div class="container3">                   
        <div class="item1"></div>               
        <div class="item2"></div>           
    </div>


效果图


2.7 grid-auto-flow

在没有设置网格项的位置时,这个属性控制网格项怎样排列。

grid-auto-flow: row | column | row dense | column dense
  • row:按照行依次从左到右排列

  • column:按照列依次从上到下排列

  • dense:按先后顺序排列

实例:

css: grid-auto-flow设为row

   .container4{            
       display: grid;            
       grid-template-columns: 200px 200px 200px 200px 200px; 
       grid-template-rows: 200px 200px;            
       grid-auto-flow: row;          
       color: #fff;             
   }    
   .item3{            
       grid-column: 1;            
       grid-row: 1 / 3;          
       background: red;     
     }       
     .item7{            
         grid-column: 5;            
         grid-row: 1 / 3;        
         background: bisque;     
     }     
     .item5{           
         background: black;    
     }    
     .item6{           
         background: blueviolet;    
     }    
     .item4{           
         background: blue;    
     }


html:

    <div class="container4">                   
        <div class="item3">3</div>        
        <div class="item4">4</div>        
        <div class="item5">5</div>        
        <div class="item6">6</div>        
        <div class="item7">7</div>        
     </div>


效果:


 grid-auto-flow设为column


2.8 grid

grid是一种简写形式:

grid: none | <grid-template-rows> / <grid-template-columns> 
| <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ];

3、网格子项的属性

3.1 grid-column-start/grid-column-end/grid-row-start/grid-row-end/grid-column/grid-row

通过网格线来定义网格项的位置。grid-column-startgrid-row-start定义网格项的开始位置,grid-column-endgrid-row-end定义网格项的结束位置。

grid-column-start: <number> | <name> | span <number> | span <name> | auto ; 
grid-column-end: <number> | <name> | span <number> | span <name> | auto ;
grid-row-start: <number> | <name> | span <number> | span <name> | auto ;  
grid-row-end: <number> | <name> | span <number> | span <name> | auto ;


  • <number> | <name>:可以是一个数字以适用被标记了数字号的网格线,或者是一个名字以适用命名了的网格线

  • span <number>:子项将跨越指定数字的网格轨迹

  • span <name>:子项将跨越指定名字之前的网格线

  • auto:自动布局,自动跨越或者默认跨越一个。

实例:

css:

.item-a{     
    grid-column-start: 2;     
    grid-column-end: five;     
    grid-row-start: row1-start     
    grid-row-end: 3  
}






.item-b{     
    grid-column-start: 1;     
    grid-column-end: span col4-start;     
    grid-row-start: 2     
    grid-row-end: span 2  
}



grid-column是grid-column-startgrid-column-end的简称;grid-rowgrid-row-startgrid-row-end的简称。

grid-column: <start-line> / <end-line> | <start-line> / span <value>;    
grid-row: <start-line> / <end-line> | <start-line> / span <value>;

实例:

css:

.item-c{     
    grid-column: 3 / span 2;     
    grid-row: third-line / 4;  
}



3.2 grid-area

给网格子项取一个名字以让它被由grid-template-areas属性创建的模板引用。同时,这个属性还可以用来更简短地表示grid-row-start+ grid-column-start + grid-row-end+ grid-column-end

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
  • <name>:选择的名字

  • <row-start> / <column-start> / <row-end> / <column-end> – 可以是网格线的数字或名字

实例:

.item-d{     
    grid-area: header  
}

作为grid-row-start+ grid-column-start + grid-row-end+ grid-column-end的一种简写:

.item-d{     
    grid-area: 1 / col4-start / last-line / 6  
}


 

3.3 justify-self/align-self

(1)justify-self


让网格子项的内容以列轴对齐(与之相反align-self是跟行轴对齐),这个值可以应用在单个网格子项的内容中。

justify-self: start | end | center | stretch


  • start – 让内容在网格区域左对齐

  • end – 让内容在网格区域右对齐

  • center – 让内容在网格区域中间对齐

  • stretch – 填充着呢个网络区域的宽度(默认值)



(2)align-self


让网格子项的内容以行轴对齐(与之相反justify-self是跟列轴对齐),这个值可以应用在单个网格子项的内容中。

align-self: start | end | center | stretch


  • start – 让内容在网格区域上对齐

  • end – 让内容在网格区域下对齐

  • center – 让内容在网格区域中间对齐

  • stretch – 填充着呢个网络区域的高度(默认值)



如果觉得文章还不错并对你有帮助的话,请分享给你的小伙伴,并点赞,点亮红心的人最美,有什么不懂得可以在底下留言哦。

如果想看源码的话可以去我的github上下载,欢迎star,github:https://github.com/Mr-MengBo/grid


9人推荐
随时随地看视频
慕课网APP

热门评论

这种布局也太复杂了吧!建议学习flex简单一些

哈哈!要学不过来了!

查看全部评论