CSS Grid网格布局是什么
导读： 对于前端的初学者来说，CSSGrid布局的概念可能有点陌生。其实也是非常容易理解的。我们都知道css是布局网页样式的，通常都要考虑到网页兼容、盒子浮动、定位等hack实现问题，而cssGrid布局也就是css网格布局，是首个特地为解决这...
对于前端的初学者来说，CSSGrid布局的概念可能有点陌生。其实也是非常容易理解的。我们都知道css是布局网页样式的，通常都要考虑到网页兼容、盒子浮动、定位等hack实现问题，而cssGrid布局也就是css网格布局，是首个特地为解决这种问题而创造出来的模块。
简单地说，CSSGrid布局就是一个二维的基于网格的布局系统，它可以同时处理列（Columns）和行（rows），目标是改变我们基于网格设计的用户接口方式。
下面我们就通过简单的Grid布局例子给大家介绍Grid网格布局：
Grid布局的简单代码示例如下：
Grid网格布局示例
.wrapper{
display:grid;
grid-template-rows:100px100px100px;
}
.item1{
grid-column-start:1;
grid-column-end:4;
}
.item1{
background:#333333;
}
大导航
2
3
4
5
6
效果如下图：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网格布局的简单基础知识介绍，具有一定的参考价值，希望对需要的朋友有所帮助！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS Grid网格布局是什么
本文地址： https://pptw.com/jishu/664869.html