Grid 网页结构 Demo：经典后台布局

    
    
    
    


    
    

        
        

            
网站头部与导航
        
        
        
        
        

            
            

                
主要内容区域
                
这里是文章或数据展示区。
            
            
            

                
辅助信息
                
这里是广告或状态卡片。
            
        
        
        
    

有这样一种写法，它存在于CSS Grid布局内，是极为直观的sublime text 3 html，是极其推荐的定义方式当中的一种，它被称作“网格模板区域” 。

总体而言，这段代码所表达的含义是，要去绘制出一个呈现为三行两列样式的棋盘，并且要为当中的每一个格子赋予一个名称 。

我们来逐行拆解它的含义：

1. 整体结构：像画表格一样写布局

grid-template-areas: 
  "header header"   /* 第一行 */
  "sidebar main"    /* 第二行 */
  "footer footer";  /* 第三行 */

2. 详详细细地去解读每一行，第一行是：" "，第二行是：" main"sublime text 3 html，第三行是：" " 。

如有侵权请联系删除！