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 行
使用 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; }
相关文章推荐：
CSS中Grid网格布局详解
CSS3 网格布局(grid layout)基础知识
以上就是CSS 网格布局（Grid）的两种方式介绍（附代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610963.html
微信扫一扫 
支付宝扫一扫 
