在這篇文章中，我將教你如何使用 css grid(網格) 布局來建立乙個超酷的影象網格，它會根據螢幕的寬度改變列的數量，以實現響應式布局。
現在就讓讓我們開始吧！
這是html：
html **:
1div>
2div>
3div>
4div>
5div>
6div>
div>
還有相應的 css ：
css **:
.container
注意：這個例子也有一些基本的樣式，比如容器寬度，網格間隔，背景顏色什麼的，我不會在這裡介紹，因為它與 css grid 沒有任何關係。讓我們開始將 列 實現響應式布局。
讓我們將每個列更改為乙個等分單位寬度。
css **:
.container
換句話說，等分單位值使你可以非常容易地改變列的寬度。
但是，上面的例子並沒有給我們想要的響應式，因為這個網格總是包含 3 列。我們希望我們的網格根據容器的寬度來改變列的數量。要做到這一點，你必須學習三個新的概念。
css **:
.container
換句話說，repeat(3, 100px)
css **:
.container
這會達到以下效果：
你會看到，現在這個網格已經可以通過容器的寬度來改變列的數量。
css **:
.container
注意，所有的響應都發生在一行 css 中。
這會達到以下效果：
正如你們所見，這樣很完美。minmax()
現在最後一步是新增。 這與 css grid 沒有任何關係，但是我們還是要來看看**。
html **:
div>
css **:
.container >div >img
效果如下：
就是這麼簡單！你已經了解了 css grid 中最複雜的概念之一，所以後面請自己動手吧。
在我們結束之前，我還需要提及瀏覽器的支援。在寫這篇文章的時候，佔全球 77％ 的**流量的瀏覽器支援css grid，而且正在攀公升。
我相信 2018 年將是 css grid 大量應用的一年。很快會得到突破，並將成為前端開發人員的必備技能。就像過去幾年在 css flexbox 所發生的一樣。
css布局 flex 響應式 grid
布局 原始布局方式，利用 的特性展示布局，沒有頁面邏輯且大量冗餘 現在幾乎不用 固定寬 常用960px，移動端縮放表現差，不友好 流式 使用float實現動態浮動，各解析度下樣式無法保證 flex彈性盒子 簡潔且強大，主流使用 css柵格布局 grid 將網頁分成一系列行和列，將對應內容放入對應區域...
響應式布局之grid網格布局
二維布局 更加靈活好用 相對於彈性盒相容性差 ie11以及以上 外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳 img ofrzqdyj 1607600417627 media grid布局容器.png class container class item 1p div class it...
實現響應式布局
響應式網頁設計現在無疑是一件大事情。如果你還不了解響應式設計，可以看看我最近發表的 響應式站點列表 譯者注 可以好好看看示例中的 在不同解析度下的展現方式 對新手來說，響應式設計 可能有一點複雜，但是事實上比你想象的簡單。為了幫助你迅速的了解響應式設計，我起草了一篇快速教程。你可以在3個步驟中學習到...