Grid網格布局學習（1）

Jaden 發布于2019-08-30 15:56 / 2142人閱讀

摘要：阮一峰的網格布局教程于月號發布正好學習一波布局。布局是二維布局將容器劃分成行和列產生單元格然后指定項目所在的單元格。

阮一峰的網格布局（grid）教程于3月25號發布,正好學習一波grid布局。雖然grid布局還不能夠支持商用,擴展一下知識面也是好的。

grid布局在主流瀏覽器的支持情況can i use查看

grid號稱是史上最強大的布局方案，它將網頁劃分成一個個小網格，可以任意組合不同的網格,做成各式各樣的布局。

grid布局和flex布局不同，flex布局是一維布局，只能改變項目的軸線位置。grid布局是二維布局,將容器劃分成行和列,產生單元格,然后指定項目所在的單元格。

容器屬性 display屬性

display:grid 指定一個容器采用網格布局。

div{
    display:grid
}

默認情況下容器都是塊級元素,但也可以設置成行內元素。

div{
    diplay:inline-grid;
}

注意:設置成網格布局之后，容器的float、display:inline-block、display:inline-cell、vertical-align和column-*等設置都失效。

grid-template-columns屬性和grid-template-rows屬性

容器指定為網格布局之后,就要設置列寬 grid-template-columns、行高 grid-template-rows

div{
    display:grid;
    grid-template-columns:100px 100px 100px;
    grid-template-rows:100px 100px 100px;
}
//指定了三行三列的網格,列寬和行高都是100px。

除了設置px還可以用百分比

div{
    display:grid;
    grid-template-columns:33.3% 33.3% 33.3%;
    grid-template-rows:33.3% 33.3% 33.3%;
}

repeat()

網格特別多的時候可以用repeat函數簡化重復的值。

div{
    display:grid;
    grid-template-columns:repeat(3,33.3%);
    grid-template-rows:repeat(3,33.3%);
}

repeat()接受2個參數,第一個參數是重復的次數,第二個參數是所要重復的值。
repeat()重復某種模式也是可以的

grid-template-columns:repeat(2, 100px 20px 80px);

auto-fill關鍵字

有時候單元格大小是固定的，但是容器大小是不確定的,如果希望每一行或每一列容納盡可能多的單元格,這時可以用auto-fill關鍵字表示自動填充。

.container{
    display:grid;
    grid-template-columns:repeat(auto-fill,100px)
}
//自動填充，每列寬100px;

fr關鍵字

為了表示比例關系,網格布局提供了fr關鍵字。如果兩列的寬分別為1fr和2fr,就表示后者是前者的2倍。

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

minmax()

minmax()函數產生一個長度范圍,表示長度就在這個范圍之內,接受兩個參數,分別是最小值、最大值

grid-tempalte-columns:1fr 1fr minmax(100px,1fr);

auto關鍵字

auto關鍵字表示由瀏覽器自己決定長度。

grid-template-columns:100px auto 100px;

未完待續

GPU云服務器云服務器網格布局學習css布局中國網格學習主機 Grid

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117578.html

(譯)原生CSS網格布局學習筆記

摘要：你可以用網格這樣做這樣的顯示效果是沒什么錯誤的，當使用網格，重新定義列數非常簡單。絕對定位當我們絕對定位一個網格元素的時候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網格自動編號。注：此文是我翻譯的第一篇技術文章。適合有一定CSS原生網格布局使用經驗的開發者（讀前需要先去了解一下原生CSS網格的語法），原生CSS網格布局（Native CSS grid）截止...

v1 2019-08-02 15:56 評論0 收藏0
(譯)原生CSS網格布局學習筆記

摘要：你可以用網格這樣做這樣的顯示效果是沒什么錯誤的，當使用網格，重新定義列數非常簡單。絕對定位當我們絕對定位一個網格元素的時候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網格自動編號。注：此文是我翻譯的第一篇技術文章。適合有一定CSS原生網格布局使用經驗的開發者（讀前需要先去了解一下原生CSS網格的語法），原生CSS網格布局（Native CSS grid）截止...

Warren 2019-08-30 13:10 評論0 收藏0
翻譯 | CSS網格（CSS Grid）布局入門

摘要：瀏覽器兼容性網格布局從開始收到支持，微軟在會更新對網格布局的支持。微軟的瀏覽器和有一種比較舊的實現，所以有不少限制，我們會簡單介紹新的實現方式和老的實現方式之間的區別，這樣你能知道如何規避他們。原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 譯者：華翔校對者：珂珂、干干翻譯 | CSS網格（CSS Grid）布局入...

Ashin 2019-08-29 13:18 評論0 收藏0
學不動了?可能方法不太對-Grid 網格布局

摘要：前情提要本人是一個學渣非科班入行年了吧前端東西真的好多啊又不斷更新需要不斷的學學學在去年年底開始我就開始不斷的尋找學習的方法如何更加高效的學習如何才能學的又快又好在這半年來不斷的總結慢慢找到了一些方法和訣竅此文章不是網格布局的教學文章只前情提要 ??本人是一個學渣,非科班入行2年了吧,前端東西真的好多啊,又不斷更新.需要不斷的學學學, showImg(https://user-gold-c...

happyfish 2019-05-22 16:41 評論0 收藏0
css grid布局入門

摘要：簡介網格布局又稱網格，是一種二維網格布局系統。在處理網頁布局方面一直做的不是很好。網格容器中的所有子元素就會自動變成網格項目網格線組成網格線的分界線。簡介 CSS網格布局（又稱網格），是一種二維網格布局系統。CSS在處理網頁布局方面一直做的不是很好。一開始我們用的是table（表格）布局，然后用float(浮動)，position（定位）和inline-block（行內塊）布局，但是...

wzyplus 2019-08-29 17:06 評論0 收藏0