使用css grid建立複雜佈局的小技巧! (值得收藏)
(推薦教學:CSS教學)
網格版面是現代CSS中最強大的功能之一。使用網格佈局可以幫助我們在沒有任何外部 UI 框架的情況下建立複雜的、快速響亮的佈局。在這篇文章中,將會介紹所有我們需要了解的 CSS 網格知識 。
CSS 網格的基礎知識
我們直接進入程式碼,如下圖所示,先寫些標籤,原始碼在這個連結裡面:https://codepen.io/Shadid/pen/ zYqNvgv
<p> <header>Header</header> <aside>Aside 1</aside> <section>Section</section> <aside>Aside 2</aside> <footer>Footer</footer> </p>
在上面,我們創建了一個header
、兩個aside
和一個footer
元素,並將它們包裝在一個container
元素中。我們為容器元素中的所有元素新增背景色和字體大小。
.container > * { background: aquamarine; font-size: 30px; }
運行的網頁如下:
現在我們加入一些網格屬性:
.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
,它將啟用網格佈局,然後我們使用grid-gap
在網格元素中增加間隙。
接下來,我們為每個html元素分配了一個網格區域名稱。在container 類別中,我們可以使用
grid-template-areas`屬性定 義html 模板的外觀,注意網格模板區域是如何排列的。
grid-template-areas: "header" "aside-1" "aside-2" "section" "footer"
元素的順序與 dom 結構不同。但是,最終按我們網路區域的順序來展示。
下一步是讓我們的頁面具有回應性。我們希望在更大的螢幕上使用不同的佈局。 CSS網格使得處理媒體查詢和建立響應式佈局變得非常容易。看下面程式碼:
@media (min-width: 670px) { .container { grid-template-areas: "header header header" "aside-1 section aside-2" "footer footer footer" } }
我們要做的就是在媒體查詢中重新排序網格模板區域。
網格列和行
如何使用 CSS 網格來組織列和?先從下面的程式碼開始:
<p> </p><p>One</p> <p>Two</p> <p>Three</p> <p>Four</p> <p>Five</p> <p>Six</p>
新增一些基本的css
.container { display: grid; height: 100vh; grid-gap: 10px; } .item { background: lightcoral; }
我們為上面的dom 結構使用了網格佈局,並使用grid-gap
增加了風格之間的間距。現在,我們使用grid-template-columns
屬性來新增一些欄位。
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template-columns: 100px 200px auto auto; }
就像這樣,我們使用了列。我們指定第一列為100px
,第二列為200px
。由於我們在第3
列和第4
列中應用了auto
,因此剩餘的螢幕長度將在其中分成兩半。
可以看到現在頁面中有一個空白。如果我想將第六列
移至第三列
和第四列
怎麼辦?為此,我們可以使用grid-column-start
和grid-column-end
屬性。
.item:nth-of-type(6) { grid-column-start: 3; grid-column-end: 5; }
注意,我們使用grid-column-end: 5
,值5
指向列線。第四列在網格的第五行結束。 grid-column-start
和grid-column-end
值是指網格線。
如果你覺得網格線的值讓人困惑,你也可以使用span
,下面的效果與上面一樣:
.item:nth-of-type(6) { grid-column-start: 3; grid-column-end: span 2; }
對於span 2
,指定p
佔用網格中的兩個插槽。現在,假設要擴充第二列
填滿下面的空白區域。我們也可以透過grid-column-start
屬性輕鬆地做到這一點。
.item:nth-of-type(2) { grid-row-start: span 2; }
我們使用span
和grid-row-start
#來指定我們想要佔據兩個插槽。
如上所見,我們已經能夠使用少量的CSS網格屬性來建立非常複雜的佈局。
有效地使用grid-templates
現在來看看grid-templates
,在本節中,我們將討論如何為不同的螢幕大小建立不同的佈局。
首先,還是先來一段 dom 結構:
<p> <header>header</header> <aside>Left</aside> <section>Section</section> <aside>Right</aside> <footer>Footer</footer> </p>
接著,加入一些樣式:
`` .container { display: grid; height: 100vh; grid-gap: 10px; } .container > * { background: coral; display: flex; justify-content: center; align-items: center; }` ``
我們為元素添加了背景色。從上面的程式碼可以看到,我們也使用了flex
屬性。我們可以將flex
和grid
結合在一起。在這個特殊的例子中,我們使用flex
屬性中心來對齊內容。
对于移动端,我们希望section
在header
下面,right
在 section
下面,我们可以使用网格区域来完成。首先,我们定义网格区域:
.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
都大点。为了实现这一点,我们可以使用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; }
我们可以根据需要设置移动端的视图,接下我们使用媒体查询来适配一下大屏幕:
@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
函数动态跟踪元素的大小
假设我们有两列,它们均匀地占据了屏幕上的可用空间。通过使用 grid-template-columns
,我们可以很容易地做到这一点。但是,如果我们想要其中一个在200px
到500px
之间呢?我们的列可以适应不同的屏幕尺寸,但其中一个永远不会大于500px
或小于200px
。
对于这些类型的场景,我们使用minmax
函数。 让我们来看看它的实际效果。
<p class="container"> <p class="one">One</p> <p class="two">Two</p> </p>
.container { display: grid; height: 100vh; grid-template-columns: minmax(200px, 500px) minmax(100px, auto); } .one { background: cyan; } .two { background: pink; }
在这个例子中,第一列总是在200px
到500px
之间。然而,第二列的最小值可以是100px
,对于更大的屏幕,它将覆盖屏幕的其余部分。
如何使用 repeat 函数?
我们讨论一下元素中的重复模式。我们如何处理它们?我们可以重复我们的代码或使用javascript。不过,还有另一种方法可以用css来实现。repeat
函数表示轨道列表的一个重复片段,允许以更紧凑的形式编写显示重复模式的大量列或行。
<p id="container"> <p> This item is 50 pixels wide. </p> <p> Item with flexible width. </p> <p> This item is 50 pixels wide. </p> <p> Item with flexible width. </p> <p> Inflexible item of 100 pixels width. </p> </p>
#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 > p { background-color: #8ca0ff; padding: 5px; }
嵌套网格
我还可以将网格嵌套在另一个网格中, 来看看如何实现这一点:
<p class="container"> <p class="item">One</p> <p class="item">Two</p> <p class="item">Three</p> <p class="item inner-grid"> <p class="item">i</p> <p class="item">ii</p> <p class="item">iii</p> <p class="item">iv</p> <p class="item">v</p> <p class="item">vi</p> </p> <p class="item">Five</p> <p class="item">Six</p> </p>
我们首先在外部container
上声明网格:
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, auto)) }
注意,我们在网格模板中有一个repeat
函数,并将其与一个minmax
函数组合在一起。我们现在也可以将网格属性应用到内部网格。
.inner-grid { display: grid; background: white; height: 100%; grid-gap: 5px; grid-template-columns: repeat(3, auto); }
这样,我们网格中嵌套了一个网格。
今天就跟大家分享到这里,感谢大家的观看,我们下期再见!
原文地址:https://blog.soshace.com/how-to-build-complex-layouts-with-css-grid/
作者:Shadid Haque
更多编程相关知识,请访问:编程入门!!
以上是使用css grid建立複雜佈局的小技巧! (值得收藏)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

React通過JSX與HTML結合,提升用戶體驗。 1)JSX嵌入HTML,使開發更直觀。 2)虛擬DOM機制優化性能,減少DOM操作。 3)組件化管理UI,提高可維護性。 4)狀態管理和事件處理增強交互性。

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
