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
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...