推荐参考学习:《CSS教程》
对于前端的初学者来说,CSS Grid布局的概念可能有点陌生。其实也是非常容易理解的。我们都知道css是布局网页样式的,通常都要考虑到网页兼容、盒子浮动、定位等hack实现问题,而css Grid布局也就是css 网格布局,是首个特地为解决这种问题而创造出来的模块。
简单地说,CSS Grid布局就是一个二维的基于网格的布局系统,它可以同时处理列(Columns)和行(rows),目标是改变我们基于网格设计的用户接口方式。
下面我们就通过简单的Grid 布局例子给大家介绍Grid网格布局:
Grid 布局的简单代码示例如下:
<!DOCTYPE html> <html lang=en> <head> <Meta charset=UTF-8> <title>Grid网格布局示例</title> </head> <style> .wrapper { display: grid; grid-template-rows: 100px 100px 100px; } .item1 { grid-column-start: 1; grid-column-end: 4; } .item1{ background: #333333; } </style> <body> <div class=wrapper> <div class=item1 style= background: #745A74;>大导航</div> <div class=item2 style=background: #CCCC66>2</div> <div class=item3 style=background: #FFCFCF>3</div> <div class=item4 style=background: aquamarine>4</div> <div class=item5 style=background: chartreuse>5</div> <div class=item6 style=background: darkorange>6</div> </div> </body> </html>
效果如下图:
上述代码中,我们给指定的容器设置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 属性通过向网格放置贡献线、跨度或无(自动)来指定网格项在网格列中的结束位置,从而指定其网格区域的块结束边缘。
本篇文章就是关于CSS Grid网格布局的简单基础知识介绍,具有一定的参考价值,希望对需要的朋友有所帮助!