網格布局的有什麼優勢呢？
css3中 網格布局擅長於將乙個頁面劃分為幾個主要區域，以及定義這些區域的大小、位置、層次等關係（前提是 html 生成了這些區域），相當於把布局區域用**進行視覺化，想象一下你要設計的網頁是乙個九宮格或者更細的宮格，行數列數都可以自定義，然後那一塊放什麼東西，你只用像拼拼圖和拆拼圖一樣隨機排列組合出你自己要的圖案就行了，很方便，需要重寫的**很少。而且它有自適應的伸縮布局。
要說到它有什麼弊端
就我看來，主要是瀏覽器相容問題把，2023年的時候，當時瀏覽器對於網格布局的相容性並不友好，支援的並不多。所以需要鼓舞大家多去用，需求多了瀏覽器就會去適配。
我用vue的環境下套了一下網格布局的**如下
<
!-- 網格布局案例--
>
="grid"
>
="title"
>title<
/div>
="header"
>header<
/div>
="sidebar"
>sidebar<
/div>
="content"
>
<
!-- 巢狀--
>
a<
/p>
b<
/p>
<
/div>
="footer"
>footer<
/div>
<
/div>
<
/template>
export default
<
/script>
/* 移動端網格樣式*/
.grid
/* 偶數的子div樣式*/
.grid div:nth-
child
(even)
/* 奇數的子div樣式*/
.grid div:nth-
child
(odd)
.title
.header
.sidebar
.content
.footer
/* 給移動裝置寫的適配 當寬度大於736px時自動切換到media裡面包含的pc端布局方式*/
@media screen and (min-width:
736px)
}<
/style>執行截圖
這是模擬pc使用者看到的畫面
CSS Grid 網格 布局
grid template columns grid template rows grid template areas grid template grid column gap grid row gap grid gap justify items align items justify con...
CSS Grid 網格布局
css grid是乙個強大的 web 二維布局工具，能夠以行和列來進行布局 通過設定display的屬性為grid或inline grid來建立網格容器 display grid 預設行排列，寬度為容器的寬度 container複製 圖1 1.png display inline grid cont...
CSS Grid 網格布局
概念 grid布局又稱css網格布局，又名 網格 是乙個二維的基於網格的布局系統，其目的只在於完全改變我們設計基於網格的使用者介面的方式 和grid template columns一起，單位統一 a.fr單位 b.repeat 方法 注 網格中提供了乙個新的單位 fr 比例單位 寫法 例子 12 ...