一行 CSS 代碼搞定響應(yīng)式布局
設(shè)置
<div class="container"><div>1div><div>2div><div>3div><div>4div><div>5div><div>6div>div>
.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 50px 50px;}
注意: 示例中有一些基礎(chǔ)的樣式，但我在這里沒有寫出來，因?yàn)檫@對 CSS 網(wǎng)格布局沒有任何影響
基礎(chǔ)響應(yīng)單位: fraction
fraction單位，fraction單位通常簡寫為fr，它允許你根據(jù)需要將容器拆分為多個(gè)塊。.container {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 50px 50px;}
grid-template-columns的值更改為1fr 2fr 1fr，第二列的寬度將會(huì)是其它兩列的兩倍。總寬現(xiàn)在是四個(gè) fraction 單位，第二列占據(jù)兩個(gè) fraction 單位，其它列各占一個(gè) fraction。效果如下：
高級響應(yīng)
repeat()
repeat()函數(shù)。這是一個(gè)強(qiáng)大的指定列和行的方法。讓我們使用repeat()函數(shù)來更改網(wǎng)格:.container {display: grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(2, 50px);}
repeat(3, 100px)等于100px 100px 100px。第一個(gè)參數(shù)指定行與列的數(shù)量，第二個(gè)參數(shù)指定它們的寬度，因此它將為我們提供與開始時(shí)完全相同的布局：
auto-fit
auto-fit。讓我們跳過固定數(shù)量的列，將3替換為自適應(yīng)數(shù)量：.container {display: grid;grid-gap: 5px;grid-template-columns: repeat(auto-fit, 100px);grid-template-rows: repeat(2, 100px);}
minmax()
minmax()。我們將 100px 替換為minmax(100px, 1fr)，代碼如下：.container {display: grid;grid-gap: 5px;grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));grid-template-rows: repeat(2, 100px);}
請注意，所有響應(yīng)都發(fā)生在一行 css 代碼中
minmax()函數(shù)定義的范圍大于或等于min， 小于或等于max。因此，現(xiàn)在每列將至少為 100px。但如果有更多的可用空間，柵格布局將簡單地將其均分給每列，因?yàn)檫@些列變成了 fraction 單位，而不是 100px。添加圖片
<div><img src="img/forest.jpg"/>div>
object-fit設(shè)置成cover，這將使圖片覆蓋它的整個(gè)容器，根據(jù)需要，瀏覽器將會(huì)對其進(jìn)行裁剪。.container > div > img {width: 100%;height: 100%;object-fit: cover;}
瀏覽器兼容性
掃碼關(guān)注公眾號，訂閱更多精彩內(nèi)容。
評論
圖片
表情