狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

一分鐘幾個(gè)樣式示例就可以掌握前端CSS Grid宮格布局

admin
2024年3月30日 0:25 本文熱度 1683

CSS Grid布局的精髓,從基礎(chǔ)知識(shí)到高級(jí)技巧,深入剖析其無與倫比的設(shè)計(jì)潛力。無論您是初學(xué)者還是資深開發(fā)者,這篇文章都將為您呈現(xiàn)一個(gè)全新的視角



01


解鎖布局的新維度

    接下來,我們將深入探討CSS Grid的各種布局技巧。通過分析實(shí)際案例和最佳實(shí)踐,您將學(xué)會(huì)如何利用Grid實(shí)現(xiàn)各種復(fù)雜布局,包括多列布局、響應(yīng)式設(shè)計(jì)和網(wǎng)格對(duì)齊等。

// 開啟grid布局

.grid-tag {

  display: grid;

}

假設(shè)在一個(gè)容器中有6個(gè)子元素是這樣子的,如果你想實(shí)現(xiàn)將這些子元素修改成2列的布局方式,應(yīng)該怎么實(shí)現(xiàn)呢


你可以使用以下代碼示例

.grid-tag{

  display: grid;

  grid-template-columns: 1fr 1fr; // 你也可以使用 repeat(2,1fr) 第一個(gè)參數(shù)多少等份

  /*grid-template-columns:200rpx 200rpx; // 使用固定的寬度*/

  /*grid-template-columns: 1fr 1fr 1fr; // 三列布局*/

}

fr單位是grid布局的單位,例如上面的2列布局你想讓第一列的占三分之二的寬度,那么你可以這樣子做

.grid-tag{

  display: grid;

  grid-template-columns: 2fr 1fr;

}

這樣子第一列的是2fr個(gè)單位,總共分成3個(gè)單位,所以第一列會(huì)占據(jù)2/3的寬度。


如果你想讓元素之間保留間隔的話,例如下示圖

.grid-tag{

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20rpx; // 統(tǒng)一設(shè)置行列間距

  /*column-gap: 20rpx; // 列間距,元素的左右間距*/

  /*row-gap: 20rpx; // 行間距,上下元素的間距*/

}

那么接下來如何實(shí)現(xiàn)grid的對(duì)齊方式呢,其實(shí)對(duì)齊方式跟flexbox的對(duì)齊方式使用方法是一樣的

.grid-tag{

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20rpx;

  align-items: center; // 垂直方向?qū)R方式 center 居中對(duì)齊 end 靠下對(duì)齊

   justify-items: center; // 水平方向?qū)R方式 center 居中對(duì)齊 end 靠下對(duì)齊

 }

02


Grid常用屬性一覽以及例圖欣賞


  • grid-template-columns 和 grid-template-rows: 這兩個(gè)屬性用于定義網(wǎng)格的列和行的大小和數(shù)量。您可以指定固定大小、百分比、自適應(yīng)大小等。
  • grid-column 和 grid-row: 這些屬性用于指定一個(gè)元素應(yīng)該跨越的列數(shù)或行數(shù)。
  • grid-gap: 這個(gè)屬性用于設(shè)置網(wǎng)格行和列之間的間距。可以通過指定單個(gè)值來統(tǒng)一設(shè)置行列間距,也可以分別指定行間距和列間距。
  • justify-items 和 align-items: 這兩個(gè)屬性用于設(shè)置網(wǎng)格容器內(nèi)所有項(xiàng)目的水平和垂直對(duì)齊方式。





03


結(jié)束

在本文中,我們了解了CSS Grid布局的精髓,學(xué)習(xí)了如何利用這一牛叉的布局技術(shù)來構(gòu)建網(wǎng)頁布局。CSS Grid提供了靈活的布局選項(xiàng)。

通過理解Grid布局的各種技巧和屬性,您也可以輕松實(shí)現(xiàn)各種復(fù)雜的布局設(shè)計(jì),從而提高更優(yōu)秀的用戶體驗(yàn)。無論是構(gòu)建響應(yīng)式網(wǎng)站、應(yīng)用程序界面還是任何其他類型的布局,Grid都能幫我們得心應(yīng)手。

該文章在 2024/3/30 0:25:42 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲(chǔ)管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved