这意味着我们再也不需要在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;
}浏览器兼容性
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類(lèi)業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門(mén)戶型、營(yíng)銷(xiāo)商務(wù)型、電子商務(wù)型、信息門(mén)戶型、微信小程序定制開(kāi)發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開(kāi)發(fā)）、微信定制開(kāi)發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號(hào)：
專屬顧問(wèn)
