目錄
CSS 網格的基礎知識
網格列和行
有效地使用grid-templates
如何使用minmax函数动态跟踪元素的大小
如何使用 repeat 函数?
嵌套网格
首頁 web前端 css教學 使用css grid建立複雜佈局的小技巧! (值得收藏)

使用css grid建立複雜佈局的小技巧! (值得收藏)

Oct 29, 2020 pm 05:41 PM
css grid html 前端

使用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;
}
登入後複製

運行的網頁如下:

使用css grid建立複雜佈局的小技巧! (值得收藏)

現在我們加入一些網格屬性:

.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 grid建立複雜佈局的小技巧! (值得收藏)

下一步是讓我們的頁面具有回應性。我們希望在更大的螢幕上使用不同的佈局。 CSS網格使得處理媒體查詢和建立響應式佈局變得非常容易。看下面程式碼:

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

我們要做的就是在媒體查詢中重新排序網格模板區域。

使用css grid建立複雜佈局的小技巧! (值得收藏)

網格列和行

如何使用 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,因此剩餘的螢幕長度將在其中分成兩半。

使用css grid建立複雜佈局的小技巧! (值得收藏)

可以看到現在頁面中有一個空白。如果我想將第六列移至第三列第四列怎麼辦?為此,我們可以使用grid-column-startgrid-column-end屬性。

.item:nth-of-type(6) {
  grid-column-start: 3;
  grid-column-end: 5;
}
登入後複製

注意,我們使用grid-column-end: 5,值5指向列線。第四列在網格的第五行結束。 grid-column-startgrid-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;
}
登入後複製

我們使用spangrid-row-start#來指定我們想要佔據兩個插槽。

使用css grid建立複雜佈局的小技巧! (值得收藏)

如上所見,我們已經能夠使用少量的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屬性。我們可以將flexgrid結合在一起。在這個特殊的例子中,我們使用flex屬性中心來對齊內容。

使用css grid建立複雜佈局的小技巧! (值得收藏)

对于移动端,我们希望sectionheader下面,rightsection 下面,我们可以使用网格区域来完成。首先,我们定义网格区域:

.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。此外,我们希望我们的sectionleftright都大点。为了实现这一点,我们可以使用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;
}
登入後複製

使用css grid建立複雜佈局的小技巧! (值得收藏)

我们可以根据需要设置移动端的视图,接下我们使用媒体查询来适配一下大屏幕:

@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,我们可以很容易地做到这一点。但是,如果我们想要其中一个在200px500px之间呢?我们的列可以适应不同的屏幕尺寸,但其中一个永远不会大于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;
}
登入後複製

在这个例子中,第一列总是在200px500px之间。然而,第二列的最小值可以是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;
}
登入後複製

使用css grid建立複雜佈局的小技巧! (值得收藏)

嵌套网格

我还可以将网格嵌套在另一个网格中, 来看看如何实现这一点:

<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);
}
登入後複製

这样,我们网格中嵌套了一个网格。

使用css grid建立複雜佈局的小技巧! (值得收藏)

今天就跟大家分享到这里,感谢大家的观看,我们下期再见!

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

作者:Shadid Haque

更多编程相关知识,请访问:编程入门!!

以上是使用css grid建立複雜佈局的小技巧! (值得收藏)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

熱門話題

Java教學
1664
14
CakePHP 教程
1422
52
Laravel 教程
1316
25
PHP教程
1267
29
C# 教程
1239
24
vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

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

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

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

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

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

React在HTML中的作用:增強用戶體驗 React在HTML中的作用:增強用戶體驗 Apr 09, 2025 am 12:11 AM

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

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

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

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

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

HTML:結構,CSS:樣式,JavaScript:行為 HTML:結構,CSS:樣式,JavaScript:行為 Apr 18, 2025 am 12:09 AM

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

HTML的未來:網絡設計的發展和趨勢 HTML的未來:網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

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

See all articles