这意味着我们再也不需要在HTML里写一堆丑陋的类名（比如 下面我们就开始吧！ 我们将基于我之前CSS Grid教程中的基础网格继续开发。初始网格长这样： HTML代码： CSS代码： CSS Grid引入了一个新单位fr（分数单位），它可以把容器分成任意份数。 我们把每列宽度改为1fr： 这样网格会把总宽度均分成三份。如果改成 要实现真正的响应式效果，我们需要掌握三个新概念： 这个函数可以更高效地定义行列： 用auto-fit替代固定列数： 最终解决方案是结合minmax()： 这样列宽最小100px，有剩余空间时会自动分配： 最后我们来添加图片： CSS设置图片自适应： 最终效果： 目前全球77%的网站流量已支持CSS Grid，这个数字还在持续增长。相信CSS Grid很快会成为前端开发的必备技能，就像Flexbox一样。col-sm-4、col-md-8），也不用为每个屏幕尺寸单独写媒体查询。准备工作
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}基础响应式：fr单位
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px;
}1fr 2fr 1fr，第二列就会比其他列宽一倍：高级响应式技巧
repeat()函数
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
}auto-fit属性
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(2, 100px);
}minmax()函数
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(2, 100px);
}添加图片
<div><img src="img/forest.jpg"/></div>
.container > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}浏览器兼容性
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
