css 网格布局（grid）能够将网页分成具有简单属性的行和列，可以直接使用 css 来定位和调整网格内的每个元素，也不需要为了实现某种布局进行多层嵌套，总而言之，css网格布局非常好用，下面我们就来看一看这篇文章给大家讲述的css网格布局的内容。
1、CSS 网格布局（Grid）
CSS Grid 布局由两个核心组成部分是父元素和子元素，父元素 是实际的 grid(网格)，子元素是 grid(网格) 内的内容。
下面是一个父元素和六个子元素
123456
要把父元素元素变成一个 grid(网格)，只要简单地把其 display 属性设置为 grid
效果图:
下面进行网格布局：
立即学习“前端免费学习笔记（深入）”；
.box {
width: 350px;
height: 350px;
/* background: #ccc; */
margin: 0 auto;
grid-gap: 5px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.item {
border: 1px solid black;
box-sizing: border-box;
}
.div1 {
grid-column-start: 1;
grid-column-end: 3;
/*(div1从占据从第一条网格线开始，到第三条网格线结束)*/
line-height: 100px;
text-align: center;
background: rgb(252, 0, 0);
/* grid-column: 1/3;(这是缩写的形式) */
}
.div2 {
line-height: 100px;
text-align: center;
background: rgb(252, 134, 0);
}
.div3 {
grid-row-start: 2;
grid-row-end: 4;
/* grid-row: 2/4;(这是缩写的形式) */
line-height: 200px;
text-align: center;
background: rgb(21, 207, 108);
}
.div4 {
grid-column-start: 2;
grid-column-end: 4;
line-height: 100px;
text-align: center;
background: rgb(18, 21, 189);
/* grid-column: 2/4;(这是缩写的形式) */
}
.div5 {
line-height: 100px;
text-align: center;
background: rgb(16, 170, 197);
}
.div6 {
line-height: 100px;
text-align: center;
background: rgb(172, 126, 199);
}上面代码中的网格线(如图箭头所指的地方就是一根网格线)：
2、响应式网格布局
和上面的差不多（添加了以下的内容）
使用grid-template-columns 属性创建一个 12 列的网格，每个列都是一个单位宽度（总宽度的 1/12 ）
使用 grid-template-rows 属性创建 3 行
企站帮企业网站管理系统1.0
下载
一、源码描述这是一款比较简单的企业管理系统源码，界面美观大方，功能简单，特别适合初学者学习研究，系统运行十分流畅，可以作为二次开发，同时也是可以帮助初学者增长知识的优秀代码。二、功能介绍主要功能：企业动态，产品介绍 ,免费下载，定制服务，该源码比较适合新手学习和二次开发使用。三、源码特点1、网站布局：采用目前最先进的布局方式DIV+CSS，符合W3C的标准和Web2.0的风格。2、程序设计模块化，
使用 grid-gap 属性在网格中的网格项之间添加一个间隙。
代码如下：
顶部（一个点表示一个空白的格子），所以距离左边和右边各有一个格子的距离。中间2所以可以利用空白的格子来对你所要拍的网页来进行布局
添加 grid-template-areas
这个属性被称为网格区域，也叫模板区域，能够让我们轻松地进行布局实验。
效果图：
代码如下：
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
grid-gap: 5px;
grid-template-areas: ". h h h h h h h h h h ." " m m c c c c c c c c c c" "f f f f f f f f f . . .";
}
.container>p {
border: 1px solid #ccc;
box-sizing: border-box;
}
.header {
text-align: center;
line-height:50px;
grid-area: h;
color:rgb(219, 52, 169);
}
.menu {
grid-area: m;
text-align: center;
line-height:350px;
}
.content {
text-align: center;
line-height:350px;
grid-area: c;
color:rgb(25, 158, 69);
}
.footer {
color:rgb(212, 112, 18);
text-align: center;
line-height:50px;
grid-area: f;
}相关文章推荐：
