前端開發(fā)工程師必讀書籍有哪些值得推薦？

我們直接進(jìn)入代碼，如下所示，先寫些標(biāo)簽，源碼在這個(gè)鏈接里面：https://codepen.io/Shadid/pen/zYqNvgv

??Header??Aside?1??Section??Aside?2??Footer

在上面，我們創(chuàng)建了一個(gè)header、兩個(gè)aside和一個(gè)footer元素，并將它們包裝在一個(gè)container 元素中。我們?yōu)槿萜髟刂械乃性靥砑颖尘吧妥煮w大小。

.container?>?*?{??background:?aquamarine;??font-size:?30px;}

運(yùn)行的網(wǎng)頁如下：

現(xiàn)在我們添加一些網(wǎng)格屬性：

.container?{??display:?grid;??grid-gap:?5px;??grid-template-areas:?????"header"????"aside-1"????"aside-2"????"section"????"footer"}/*?Assign?grid?areas?to?elements?*/header?{??grid-area:?header;}aside:nth-of-type(1)?{??grid-area:?aside-1;}aside:nth-of-type(2)?{??grid-area:?aside-2;}section?{??grid-area:?section;}footer?{??grid-area:?footer;}

首先，我們定義了display:grid，它將啟用網(wǎng)格布局，然后我們使用grid-gap在網(wǎng)格元素中增加間隙。

接下來，我們?yōu)槊總€(gè)html元素分配了一個(gè)網(wǎng)格區(qū)域名稱。在container 類中，我們可以使用grid-template-areas`屬性定 義html 模板的外觀，注意網(wǎng)格模板區(qū)域是如何排列的。

grid-template-areas:?????"header"????"aside-1"????"aside-2"????"section"????"footer"?

元素的順序與 dom 結(jié)構(gòu)不同。但是，最終按我們網(wǎng)絡(luò)區(qū)域的順序來展示。

下一步是使我們的頁面具有響應(yīng)性。我們希望在更大的屏幕上使用不同的布局。CSS網(wǎng)格使得處理媒體查詢和創(chuàng)建響應(yīng)式布局變得非常容易。看下面代碼：

@media?(min-width:?670px)?{??.container?{????grid-template-areas:???????"header??header??header"??????"aside-1?section??aside-2"??????"footer????footer????footer"??}}

我們所要做的就是在媒體查詢中重新排序網(wǎng)格模板區(qū)域。

網(wǎng)格列和行

如何使用 CSS 網(wǎng)格來組織列和？先從下面的代碼開始：

??One??Two??Three??Four??Five??Six

添加一些基本的 css

.container?{??display:?grid;??height:?100vh;??grid-gap:?10px;}.item?{??background:?lightcoral;}

我們?yōu)樯厦娴?dom 結(jié)構(gòu)使用了網(wǎng)格布局，并使用grid-gap增加了風(fēng)格之間的間距。現(xiàn)在，我們使用grid-template-columns屬性來添加一些列。

.container?{????display:?grid;????height:?100vh;????grid-gap:?10px;????grid-template-columns:?100px?200px?auto?auto;}

就像這樣，我們使用了列。我們指定第一列為100px，第二列為200px。由于我們?cè)诘?列和第4列中應(yīng)用了auto，因此剩余的屏幕長度將在其中分成兩半。

可以看到現(xiàn)在頁面中有一個(gè)空白。如果我想將第六列移至第三列和第四列怎么辦？為此，我們可以使用grid-column-start和grid-column-end屬性。

.item:nth-of-type(6)?{??grid-column-start:?3;??grid-column-end:?5;}

注意，我們使用grid-column-end: 5，值5指向列線。第四列在網(wǎng)格的第五行結(jié)束。grid-column-start和grid-column-end值是指網(wǎng)格線。

如果你覺得網(wǎng)格線的值讓人困惑，你也可以使用span，下面的效果與上面一樣：

.item:nth-of-type(6)?{??grid-column-start:?3;??grid-column-end:?span 2;}

對(duì)于span 2，指定div占用網(wǎng)格中的兩個(gè)插槽。現(xiàn)在，假設(shè)要擴(kuò)展第二列填充下面的空白區(qū)域。我們也可以通過grid-column-start屬性輕松地做到這一點(diǎn)。

.item:nth-of-type(2)?{??grid-row-start:?span 2;}

我們使用span和grid-row-start來指定我們想要占據(jù)兩個(gè)插槽。

如上所見，我們已經(jīng)能夠使用少量的CSS網(wǎng)格屬性來構(gòu)建非常復(fù)雜的布局。

有效地使用 grid-templates

現(xiàn)在來看看grid-templates，在本節(jié)中，我們將討論如何為不同的屏幕大小創(chuàng)建不同的布局。

首先，還是先來一段 dom 結(jié)構(gòu)：

??header??Left??Section??Right??Footer

接著，添加一些樣式：

`` .container { display: grid; height: 100vh; grid-gap: 10px; }

.container > * { background: coral; display: flex; justify-content: center; align-items: center; }` ``

我們給元素添加了背景色。從上面的代碼中可以看到，我們也使用了flex屬性。我們可以將flex和grid結(jié)合在一起。在這個(gè)特殊的例子中，我們使用flex屬性中心對(duì)齊內(nèi)容。

對(duì)于移動(dòng)端，我們希望section在header下面，right 在 section下面，我們可以使用網(wǎng)格區(qū)域來完成。首先，我們定義網(wǎng)格區(qū)域：

.container?{??display:?grid;??height:?100vh;??grid-gap:?10px;??grid-template-areas:????"header"????"section"????"right"????"left"????"footer"}aside:nth-of-type(1)?{??grid-area:?left;}aside:nth-of-type(2)?{??grid-area:?right;}section?{??grid-area:?section;}footer?{??grid-area:?footer;}header?{??grid-area:?header;}

在 grid-template-areas 中可以看到，我們先有header ，然后是section，然后是right，最后是left。此外，我們希望我們的section比 left 和 right都大點(diǎn)。為了實(shí)現(xiàn)這一點(diǎn)，我們可以使用rid-template-rows屬性

.container?{??display:?grid;??height:?100vh;??grid-gap:?10px;??grid-template-areas:?????"header"????"section"????"right"????"left"????"footer";??grid-template-rows:?1fr?6fr?2fr?2fr?1fr;}

少了一張圖片

我們可以根據(jù)需要設(shè)置移動(dòng)端的視圖，接下我們使用媒體查詢來適配一下大屏幕：

@media?(min-width:?500px)??{??.container?{????grid-template-areas:???????"header?header??header"??????"left???section?right"??????"footer?footer??right";????grid-template-rows:?1fr?6fr?1fr;????grid-template-columns:?1fr?6fr?1fr;??}}

如何使用minmax函數(shù)動(dòng)態(tài)跟蹤元素的大小

假設(shè)我們有兩列，它們均勻地占據(jù)了屏幕上的可用空間。通過使用 grid-template-columns，我們可以很容易地做到這一點(diǎn)。但是，如果我們想要其中一個(gè)在200px到500px之間呢?我們的列可以適應(yīng)不同的屏幕尺寸，但其中一個(gè)永遠(yuǎn)不會(huì)大于500px或小于200px。

對(duì)于這些類型的場景，我們使用minmax函數(shù)。讓我們來看看它的實(shí)際效果。

??One??Two.container?{??display:?grid;??height:?100vh;??grid-template-columns:?minmax(200px,?500px)?minmax(100px,?auto);}.one?{??background:?cyan;}.two?{??background:?pink;}

在這個(gè)例子中，第一列總是在200px到500px之間。然而，第二列的最小值可以是100px，對(duì)于更大的屏幕，它將覆蓋屏幕的其余部分。

如何使用 repeat 函數(shù)？

我們討論一下元素中的重復(fù)模式。我們?nèi)绾翁幚硭鼈?我們可以重復(fù)我們的代碼或使用javascript。不過，還有另一種方法可以用css來實(shí)現(xiàn)。repeat函數(shù)表示軌道列表的一個(gè)重復(fù)片段，允許以更緊湊的形式編寫顯示重復(fù)模式的大量列或行。

??????This?item?is?50?pixels?wide.????????Item?with?flexible?width.????????This?item?is?50?pixels?wide.????????Item?with?flexible?width.????????Inflexible?item?of?100?pixels?width.??#container?{??display:?grid;??grid-template-columns:?repeat(2,?50px?1fr)?100px;??grid-gap:?5px;??box-sizing:?border-box;??height:?200px;??width:?100%;??background-color:?#8cffa0;??padding:?10px;}#container?>?div?{??background-color:?#8ca0ff;??padding:?5px;}

嵌套網(wǎng)格

我還可以將網(wǎng)格嵌套在另一個(gè)網(wǎng)格中， 來看看如何實(shí)現(xiàn)這一點(diǎn)：

??One??Two??Three??????i????ii????iii????iv????v????vi????Five??Six

我們首先在外部container上聲明網(wǎng)格：

.container?{??display:?grid;??height:?100vh;??grid-gap:?10px;??grid-template-columns:?repeat(auto-fill,?minmax(200px,?auto))}

注意，我們?cè)诰W(wǎng)格模板中有一個(gè)repeat函數(shù)，并將其與一個(gè)minmax函數(shù)組合在一起。我們現(xiàn)在也可以將網(wǎng)格屬性應(yīng)用到內(nèi)部網(wǎng)格。

.inner-grid?{??display:?grid;??background:?white;??height:?100%;??grid-gap:?5px;??grid-template-columns:?repeat(3,?auto);}

這樣，我們網(wǎng)格中嵌套了一個(gè)網(wǎng)格。

今天就跟大家分享到這里，感謝大家的觀看，我們下期再見！

---

作者：Shadid Haque 譯者：前端小智 來源：soshace

原文：https://blog.soshace.com/how-to-build-complex-layouts-with-css-grid/

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的display函数怎么使用_使用网络构建复杂布局超实用的技巧，赶紧收藏吧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。