CSS 網格 Gird 佈局

来源:https://www.cnblogs.com/risejl/archive/2022/09/21/16714329.html
-Advertisement-
Play Games

一.起步 1.1 配置uni-app開發環境 什麼是uni-app,就是基於vue的一個開發框架,可以將我們寫的一套代碼,同時發佈到ios、安卓、小程式等多個平臺 ==官方推薦使用Hbuilderx來寫uni-app項目== 下載之後可以將預設改為vscode 進入hbuilder插件市場下載scs ...


CSS 網格 Gird 佈局

創建網格 Gird

通過將屬性 display 的值設為 grid,HTML 元素就可以變為網格容器。

註意: 在 CSS 網格中,父元素稱為容器(container),它的子元素稱為項(items)。

#container {
  display: grid;
}

列,行 Column Row

在一個網格容器中使用 grid-template-columns 屬性可以添加一些列,示例如下:

.container {
  display: grid;
  grid-template-columns: 50px 50px;
}

上面的代碼會在網格容器中添加兩列,寬度均為 50px。 grid-template-columns 屬性值的個數表示網格的列數,每個值表示相應的列寬度。

創建的網格會自動設置行數。 要手動調整行,使用 grid-template-rows 屬性。

.container {
  display: grid;
  grid-template-columns: 50px 50px;
  grid-template-rows: 50px 50px;
}

單位 Unit

在 CSS 網格中,可以使用絕對單位(如 px)或相對單位(如 em)來定義行或列的大小。 下麵的單位也可以使用:

fr:設置列或行占剩餘空間的比例,

auto:設置列寬或行高自動等於它的內容的寬度或高度,

%:將列或行調整為它的容器寬度或高度的百分比,

grid-template-columns: 1fr 100px 2fr;

間距 Gap

如果需要在列與列之間添加一些間距,我們可以使用 grid-column-gap.

grid-column-gap: 20px;

還可以用 grid-row-gap設置行間距。

grid-row-gap: 5px;

grid-gap 屬性是前兩個挑戰中出現的 grid-row-gapgrid-column-gap 的簡寫屬性,它更方便使用。 如果 grid-gap 只有一個值,那麼這個值表示行與行之間、列與列之間的間距均為這個值。

如果有兩個值,那麼第一個值表示行間距,第二個值表示列間距

grid-gap: 10px 20px;

空間大小 Spacing

到目前為止,所有的討論都是圍繞網格容器的。 grid-column 屬性是用於網格項本身的屬性。

網格中,假想的水平線和垂直線被稱為線(lines)。 這些線在網格的左上角從 1 開始編號,垂直線向右、水平線向下累加計數。

要設置一個網格項占據幾列,使用 grid-column 屬性加上網格線條的編號來定義網格項開始和結束的位置。

grid-column: 2 / 4;

也可以設置它占用多行。 使用 grid-row 屬性來定義一個網格項開始和結束的水平線。

grid-row: 2 / 4;

對齊 Align

在 CSS 網格中,每個網格項的內容分別位於被稱為單元格(cell)的框內。 使用網格項的 justify-self 屬性,設置其內容的位置在單元格內沿水平軸的對齊方式。 預設情況下,這個屬性的值是 stretch,這將使內容占滿整個單元格的寬度。 該 CSS 網格屬性也可以使用其他的值:

start:使內容在單元格左側對齊,

center:使內容在單元格居中對齊,

end:使內容在單元格右側對齊

justify-self: center;

正如能設置網格項沿水平方向的對齊方式一樣,我們也可以設置網格項沿豎直方向的對齊方式。 為此,可以對網格項使用 align-self 屬性來實現。

align-self: end;

CSS 網格中的網格項共用對齊方式。 可以分別設置它們的對齊方式,也可以對網格容器使用 justify-items 使它們一次性沿水平軸對齊。 這個屬性能接受之前兩個中學到的所有值作為屬性值,但與之前不同的是,它會將網格中 所有 的網格項按所設置的方式對齊。

justify-items: center;

對網格容器使用 align-items 屬性可以讓網格中所有的網格項沿豎直方向對齊。

align-items: end;

分區 Area

可以將網格中的一些單元格組合成一個區域(area),併為該區域指定一個自定義名稱。 可以通過給容器加上 grid-template-areas來實現:

grid-template-areas:
  "header header header"
  "advert content content"
  "advert footer footer";

在為網格添加區域模板後,可以通過引用所定義的區域的名稱,將元素放入相應的區域。 為此,需要對網格項使用 grid-area

.item1 {
  grid-area: header;
}

grid-area 屬性還有另一種使用方式。 如果網格中沒有定義區域模板,也可以像這樣為它添加一個模板:

item1 { grid-area: 1/1/2/4; }

上例中數字代表這些值:

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

重覆 Repeat

使用 repeat 方法指定行或列的重覆次數,後面加上逗號以及需要重覆的值。

grid-template-columns: repeat(2,1fr,50px) 20px;

限制項目大小 Limit Item Size

內置函數 minmax 也可用於設置 grid-template-columnsgrid-template-rows 的值。 它的作用是在網格容器改變大小時限制網格項的大小。 為此,需要指定網格項允許的尺寸範圍。

grid-template-columns: 100px minmax(50px, 200px);

自動填充 Auto Fill

repeat 方法帶有一個名為自動填充(auto-fill)的功能。 它的功能是根據容器的大小,儘可能多地放入指定大小的行或列。 可以通過結合 auto-fillminmax 來更靈活地佈局。

grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));

auto-fit 效果幾乎和 auto-fill一樣。 不同點僅在於,當容器的大小大於各網格項之和時,auto-fill 會持續地在一端放入空行或空列,這樣就會使所有網格項擠到另一邊;而 auto-fit 則不會在一端放入空行或空列,而是會將所有網格項拉伸至合適的大小。

註意: 如果容器寬度不足以將所有網格項放在同一行,餘下的網格項將會移至新的一行。

grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));

嵌套網格 Nested Grid

將元素轉換為網格只會影響其子元素(即直接後代元素,英文為 direct descendants。意思是一個元素的所有後代元素中,父級元素為該元素的所有元素)。 因此,如果把某個子元素設置為網格,就會得到一個嵌套的網格。

display: grid;
grid-template-columns: auto 1fr;

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 1. 定義整體結構 先寫出構造函數,將Promise向外暴露 /* 自定義Promise函數模塊:IIFE */ (function (window) { /* Promise構造函數 executor:執行器函數 */ function ...
  • 一.分類 1.1 頁面佈局 首先創建cate的分支 定義基本結構,因為是兩個需要滾動的區域,所以這裡要用到組件 ==scroll== 這個組件如果是y scroll那就要固定高度,x scroll那就要固定寬度 這裡有個問題就是,我們應該把高度限定在整個屏幕高度 這裡用到uniapp一個api == ...
  • 每日3題 1 以下代碼執行後,控制臺中的輸出內容為? class A { static a = "123"; } class B extends A {} console.log(B.a); 2 以下3句語句,哪句是合法的 1.toString(); 1..toString(); 1...toStr ...
  • 1. 安裝sass 較新的版本不需要配置sass-loader等一系列插件,安裝即用。 npm install --save-dev sass 2. 編寫App.tsx中的基本DOM 更改app.css為app.scss,並刪除其中全部內容 使用如下代碼替換app.tsx中的內容 import ". ...
  • 1 微信小程式原生推拉流組件功能簡介 本文將介紹如何使用微信小程式原生推拉流組件 <live-pusher> 和 <live-player> 進行推拉流,快速實現一個簡單的實時音視頻通話。 由於微信小程式原生推拉流組件使用起來比較複雜,推薦開發者使用即構封裝的音視頻SDK <zego-push> 和 ...
  • 1.HTTP和HTTPS的基本概念 http:是一個客戶端和服務端請求和應答的標準(TCP),用於從www伺服器傳輸超文本到本地瀏覽器的超文本傳輸協議。 https:是以安全為目標的HTTP通道,即HTTP下加入SSL層進行加密。其作用是:建立一個信息安全通道,確保數據的傳輸,確保網站的真實性。 補 ...
  • 原因 項目每次打包後都需要改動項目版本號,這個改動每次都需要在package.json中修改version,比較麻煩,到底有沒有一種打包後版本號自加的辦法。 方案 版本號自加其實可以使用fs修改文件來實現的。 具體思路是:在執行打包命令npm run build時,同時執行一段js代碼,該代碼通過調 ...
  • 在我們基於UniApp的H5項目中,需要生成一些二維碼進行展示,另外也需要讓用戶可以掃碼進行一定的快捷操作,本篇隨筆介紹一下二維碼的生成處理和基於H5的掃碼進行操作。二維碼的生成,使用了JS文件weapp-qrcode.js進行處理,而二維碼掃碼則是基於一個第三方組件的方式進行支持的,最後通過統一入... ...
一周排行
    -Advertisement-
    Play Games
  • 1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 視頻地址:【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻:搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 引言 集成測試可在包含應用支持基礎結構(如資料庫、文件系統和網路)的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比,能夠在更廣泛的級別上評估應用的組件,確認多個組件一起工作以生成預 ...
  • 在.NET Emit編程中,我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作,能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令,開發人員可以靈活地進行算術運算、邏輯運算和比較操作,從而實現各種複雜的演算法和邏輯......本篇之後,將進入第七部分:實戰項目 ...
  • 前言 多表頭表格是一個常見的業務需求,然而WPF中卻沒有預設實現這個功能,得益於WPF強大的控制項模板設計,我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格,統計1-12月的數據。 此時我們有一個需求,需要將月份按季度劃分,以便能夠直觀地看到季度統計數據,以下為該需求 ...
  • 如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流,人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面,比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰,這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎? TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • 在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 在C#編程世界中,語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中,“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用,揭示其作為C#語法奇兵的重要角色。 一、下劃線 _:神秘的棄元符號 下劃線 _ 在C#中並非 ...