CSS3中Grid網(wǎng)格布局的使用示例

這篇文章主要介紹了CSS3中Grid網(wǎng)格布局的使用示例，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

通過這篇文章以后等我們自己做UI庫的時(shí)候就會(huì)多了一種做法。

我們來使用CSS Grid創(chuàng)建一個(gè)超酷的圖像網(wǎng)格圖，它可以根據(jù)屏幕的寬度來改變列的數(shù)量。最精彩的地方在于：所有的響應(yīng)特性被添加到了一行css代碼中。這意味著我們不必將HTML與丑陋的類名(如col-sm-2, col-md-4)混雜在一起，也不必為每個(gè)屏幕創(chuàng)建媒體查詢。

我們首先根據(jù)這個(gè)最基本的樣式來分析grid，然后進(jìn)行拓展。接下來我將代碼分享給大家：

html代碼：

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

css代碼

* {
   	margin: 0;
    padding: 0;
}
// grid布局的關(guān)鍵代碼！?。?
// grid布局的關(guān)鍵代碼?。?！
// grid布局的關(guān)鍵代碼?。?！
.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}
.container div {
    text-align: center;
    line-height: 50px;
    border: 2px solid;
    margin: 2px;
}
.container div:nth-child(1) {background: yellow;}
.container div:nth-child(2) {background: orange;}
.container div:nth-child(3) {background: red;}
.container div:nth-child(4) {background: yellowgreen;}
.container div:nth-child(5) {background: paleturquoise;}
.container div:nth-child(6) {background: greenyellow;}

這時(shí)我們打開控制臺(tái)來分析它：

發(fā)現(xiàn)每一個(gè)子元素的寬高都變成了96px * 46px?？墒俏覀儾]有給子元素設(shè)置寬高，那么這個(gè)是哪里來的呢？我們?cè)诨仡^看父元素的樣式：

.container {
    display: grid;
    /* 下面句的意思就是這個(gè)容器里面的子元素分成三列，每列都是100px寬 */
    grid-template-columns: 100px 100px 100px;	
    /* 下面這句的意思就是這個(gè)容器里面的子元素分成倆行，每行都是50px的高 */
    grid-template-rows: 50px 50px;
}

由于我們給子元素加了2px的邊框，最后展現(xiàn)的96 * 64也就清楚了，grid布局還將容器下的所有子元素變成了box-sizing: border-box;怪異盒模型。如果您對(duì)于怪異盒模型不是很了解請(qǐng)自行百度，如果想了解更多的CSS，HTML知識(shí)請(qǐng)觀看：https://blog.csdn.net/weixin_43606158/article/details/89811189
我們來論證一下我們剛剛所猜測(cè)的。
我們現(xiàn)在將容器的css樣式改為這樣：

.container {
  	display: grid;
    grid-template-columns: 100px 100px 200px 100px;
    grid-template-rows: 80px 50px 20px;
}

效果圖：

如我們猜測(cè)的一樣，現(xiàn)在變成了四列，每列的第三個(gè)變成了200px寬度，
但是行并沒有變成三行，因?yàn)閮?yōu)先排列列，如果排完沒有多余的就不會(huì)在排列更多的行了。其他各種復(fù)雜的情況朋友們請(qǐng)自行測(cè)試，筆者在這里不再多廢話了，因?yàn)橐_始grid布局牛逼的地方了。

現(xiàn)在上面的這種方法只是給子元素寫固定的寬度高度，這并不是我們想要的，它并不會(huì)隨著瀏覽器寬度高度的變化而進(jìn)行變化，我們要的是能夠自適應(yīng)的。

讓我們讓列開始具有自適應(yīng)特性吧。

CSS 柵格布局帶來了一個(gè)全新的值:fraction單位，fraction單位通常簡(jiǎn)寫為fr，它允許你根據(jù)需要將容器拆分為多個(gè)塊。

讓我們將每一列更改為一個(gè) fraction 單位寬:
容器的CSS樣式更改為：

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px 50px;
}

結(jié)果是柵格布局將會(huì)把整個(gè)寬度分成三個(gè) fraction，每列占據(jù)一個(gè) fraction 單位。

如果我們將grid-template-columns的值更改為1fr 2fr 1fr，第二列的寬度將會(huì)是其它兩列的兩倍。總寬現(xiàn)在是四個(gè) fraction 單位，第二列占據(jù)兩個(gè) fraction 單位，其它列各占一個(gè) fraction。

朋友們請(qǐng)自行觀看效果，此時(shí)你的這些子元素都會(huì)隨著你的屏幕寬度的變化而跟著變化了。

總的來說，fraction 單位值將使你可以很容易的更改列的寬度。

高級(jí)響應(yīng)：

然而，上面列子并沒有給出我們想要的響應(yīng)性，因?yàn)榫W(wǎng)格總是三列寬。我們希望網(wǎng)格能根據(jù)容器的寬度改變列的數(shù)量。要做到這一點(diǎn)，你必須學(xué)習(xí)如下三個(gè)概念：

repeat()

首先我們學(xué)習(xí)repeat()函數(shù)。這是一個(gè)強(qiáng)大的指定列和行的方法。讓我們使用repeat()函數(shù)來更改網(wǎng)格:
容器CSS更改為：

.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);
}

現(xiàn)在，柵格將會(huì)根據(jù)容器的寬度調(diào)整其數(shù)量。它會(huì)嘗試在容器中容納盡可能多的 100px 寬的列。但如果我們將所有列硬寫為 100px，我們將永遠(yuǎn)沒法獲得所需的彈性，因?yàn)樗鼈兒茈y填充整個(gè)寬度。

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);
}

請(qǐng)注意，所有響應(yīng)都發(fā)生在一行 css 代碼中
現(xiàn)在的效果堪稱完美。minmax()函數(shù)定義的范圍大于或等于 min， 小于或等于 max。

因此，現(xiàn)在每列將至少為 100px。但如果有更多的可用空間，柵格布局將簡(jiǎn)單地將其均分給每列，因?yàn)檫@些列變成了 fraction 單位，而不是 100px。

如果朋友們要在子元素里面添加圖片的話請(qǐng)繼續(xù)向下看，CSS屬性的object-fit: cover;

我們現(xiàn)在可以將你所有子元素當(dāng)中的數(shù)字改成圖片了，比如：

<div><img src="你的圖片路徑"/></div>

為了使圖片適應(yīng)于每個(gè)條目，我們將其寬、高設(shè)置為與條目本身一樣，我們使用object-fit:cover。這將使圖片覆蓋它的整個(gè)容器，根據(jù)需要，瀏覽器將會(huì)對(duì)其進(jìn)行裁剪。
增加CSS樣式

.container > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

ok！現(xiàn)在你已經(jīng)了解了 CSS Grid 布局中最復(fù)雜的概念之一了，請(qǐng)給自己一個(gè)贊吧。

瀏覽器兼容性：

如果您不知道怎么查看瀏覽器的兼容性，筆者給您推薦：查看前端代碼在各瀏覽器的支持情況的方法

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS3中Grid網(wǎng)格布局的使用示例”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!