CSS Grid网格布局是什么

2024-01-18 10:26 小编

 对于前端的初学者来说,CSSGrid布局的概念可能有点陌生。


其实也是非常容易理解的。


我们都知道css是布局网页样式的,通常都要考虑到网页兼容、盒子浮动、定位等hack实现问题,而cssGrid布局也就是css网格布局,是首个特地为解决这种问题而创造出来的模块。   


简单地说,CSSGrid布局就是一个二维的基于网格的布局系统,它可以同时处理列(Columns)和行(rows),目标是改变我们基于网格设计的用户接口方式。  


 下面我们就通过简单的Grid布局例子给大家介绍Grid网格布局:   Grid布局的简单代码示例如下:         <!DOCTYPEhtml>   <htmllang="en">   <head>   <metacharset="UTF-8">   <title>Grid网格布局示例</title>   </head>   <style>   .wrapper{   display:grid;   grid-template-rows:100px100px100px;   }   .item1{   grid-column-start:1;   grid-column-end:4;   }   .item1{   background:#333333;   }   </style>   <body>   <divclass="wrapper">   <divclass="item1"style="background:#745A74;">大导航</div>   <divclass="item2"style="background:#CCCC66">2</div>   <divclass="item3"style="background:#FFCFCF">3</div>   <divclass="item4"style="background:aquamarine">4</div>   <divclass="item5"style="background:chartreuse">5</div>   <divclass="item6"style="background:darkorange">6</div>   </div>   </body>   </html>   



效果如下图:327e10ab178f08a23dc64e039d74d97.png   上述代码中,我们给指定的容器设置display:grid属性表示开始使用Grid布局,也就是将元素定义为网格容器,并设置列(grid-template-columns)和行(grid-template-rows)的大小,然后按grid-column和grid-row把子元素放进容器中。  


 重要属性介绍:   grid-template-rows属性是基于网格行的维度,定义网格线的名称和网格轨道的尺寸大小。  


 grid-template-columns属性是基于网格列的维度,定义网格线的名称和网格轨道的尺寸大小。   


Grid-column-start属性指定网格项在网格列中的开始位置,方法是为其网格位置贡献一行、一个跨度或自动。此起始位置定义网格区域的块起始边缘。   


Grid-column-end属性通过向网格放置贡献线、跨度或无(自动)来指定网格项在网格列中的结束位置,从而指定其网格区域的块结束边缘。   


本篇文章就是关于CSSGrid网格布局的简单基础知识介绍,

Tag: 什么
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码