grid网格系统_响应式布局代码怎么写

一、概述

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

相对于display:flex 弹性布局，Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，在某些使用场景下，会比flex布局更便捷一些。

二、基础使用

 <div class="container"> <div class="item bg-color-red">1</div> <div class="item bg-color-yellow">2</div> <div class="item bg-color-green">3</div> <div class="item bg-color-red">4</div> <div class="item bg-color-yellow">5</div> <div class="item bg-color-green">6</div> <div class="item bg-color-red">7</div> <div class="item bg-color-yellow">8</div> <div class="item bg-color-green">9</div> </div> 

那么我们采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）

 .container { 
    display: grid; /* 设置三列 宽度自适应 */ /* grid-template-columns: auto auto auto;*/ /* grid-template-columns: 1fr 2fr 1fr ; */ /* grid-template-columns:repeat(3, 1fr 2fr 1fr); */ /* 设置三列 宽度自适应 repeat()写法效果同上 */ grid-template-columns: repeat(3, auto); /* 设置三行 容器高度 200px */ /* grid-template-rows: 200px 200px 200px; */ /* grid-template-rows: repeat(3, 200px 200px 200px); */ grid-template-rows: repeat(3, 200px); /* 行内自动填充宽度为 200px */ /* grid-template-columns: repeat(auto-fill, 200px); */ /* 设置行列 直接的间距 */ grid-gap: 10px; } .item { 
    text-align: center; line-height: 200px; font-size: 32px; } .bg-color-red { 
    background: red; } .bg-color-yellow { 
    background: yellow; } .bg-color-green { 
    background: green; } 

repeat()函数

有时候重复写同样的值很麻烦，我们可以使用·repeat()函数

repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值

auto-fill参数

grid-template-columns: repeat(auto-fill, 200px);设置宽度为200px，自动填充，超出宽度自动换行。

fr 关键字

grid-template-columns:repeat(3, 1fr 2fr 1fr)比例分配布局。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍，个人觉得类似于flex:1,flex:2,的性质。

接下来我们来实现响应式，不得不说grid布局还是很强大的，在响应式布局实现起来也很方便

 @media screen and (min-width:765px) and (max-width:1200px) { 
    .container { 
    display: grid; grid-template-columns: repeat(3, auto); grid-gap: 10px; } } @media screen and (min-width:500px) and (max-width:768px) { 
    .container { 
    display: grid; grid-template-columns: repeat(2, auto); grid-gap: 10px; } } @media screen and (max-width:500px) { 
    .container { 
    display: grid; grid-template-columns: 1fr; grid-gap: 10px; } } 

以上我们通过控制grid-template-columns就简单实现了响应式的布局，希望对大家有所帮助。