【CSS】grid layout 體驗 container 屬性

uc 瀏覽器最近帶來u4 2.0的更新 最吸引我的是grid layout 本文代碼都可以在uc上運行

基礎知識 最好看看 我只是自己理解一遍

A Complete Guide to Grid | CSS-Trickscss-tricks.com

兼容性

移動端目前除了android 8.0 的帶的android system webview 可以

目前只有uc的這個內核實現完畢

edge16之前的grid實現實際上是不標準的 一些功能用不起來 大量有效屬性缺失

開始胡說八道

基礎scss

body {n margin: 0;n}nn.debug {n .item {n background-color: #000000;n }n}n

基本的宮格布局 ok

<div class="container debug">n <?php for ($i = 0; $i < 10; $i++): ?>n <div class="item item-<?= $i; ?>"></div>n <?php endfor; ?>n </div>n

scss

.container {n display: grid;n grid-template-columns: repeat(5, 16vw);n grid-auto-rows: minmax(16vw, auto);n grid-column-gap: 5vw;n grid-row-gap: 5vw;n width: 100vw;n}n

截圖

減少數量 並且希望第一個占 4個位

.container {n .item-0 {n grid-area: 1/1/3/3;n }n}n

使用 grid-area 參數

grid-area是 grid-row-start, grid-column-start, grid-row-end and grid-column-end 四個屬性的縮寫

grid 的標籤可以細分為兩類：一類是屬於 container，一類是數據 items。 各有

container （display: grid那個）：

• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid
• grid-column-gap
• grid-row-gap
• grid-gap
• justify-items
• align-items
• justify-content
• align-content

items （container子元素）：

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self

grid-area 就是items的布局

grid-row-start 就是指當前item在row上從第幾個開始

grid-row-end 就是指到第幾個結束

grid-row-start: 1;

grid-row-end: 3;

指在第1條豎線和第3條豎線之間 就是第1個和第2個cell

同里佔據第一二行 就是

grid-column-start: 1;

grid-column-end: 3;

那麼我們減少點參數試試

.container {n display: grid;n width: 100vw;n height: 100vh;n grid-column-gap: 5vw;n grid-row-gap: 5vw;n}n

如圖

grid-row-gap 有效 grid-column-gap 由於沒有設置column 多行是不起效的

grid-template-columns

指的是columns方向track大小

兩行可以寫成

grid-template-columns: 1fr 1fr;n

也可以寫成

grid-template-columns: repeat(3, 1fr);n

或

grid-template-columns: repeat(3, auto);n

repeat這裡先簡單使用下

grid-template-rows

指的是rows方向track大小 和grid-template-columns類似

可以設置 比實際grid rows內容多

.container {n display: grid;n grid-template-columns: repeat(3, 1fr);n grid-template-rows: repeat(4, 1fr);n}n

我覺得這張圖對於這兩個屬性的理解最ok

grid-template-areas

和grid-area屬性一起搭配使用

.container {n grid-template-areas: n "<grid-area-name> | . | none | ..."n "...";n}n

我們將數量改為四個

<?php for ($i = 0; $i < 4; $i++): ?>n <div class="item item-<?= $i; ?>"><?= $i; ?></div>n <?php endfor; ?>n

改變scss

.item-0 {n grid-area: header;n}n.item-1 {n grid-area: main;n}n.item-2 {n grid-area: sidebar;n}n.item-3 {n grid-area: footer;n}nn.container {n display: grid;n grid-template-columns: repeat(4, 1fr);n grid-template-rows: auto;n grid-template-areas:n "header header header header"n "main main main sidebar"n "footer footer footer footer";n}n

grid-template

grid-template-rows grid-template-columnsgrid-template-areas 縮寫

grid-column-gap

指明grid cloumn line 大小

grid-row-gap

指明grid row line 大小

• <line-size> - a length value

.container {n grid-column-gap: <line-size>;n grid-row-gap: <line-size>;n}n

比如

.container {n grid-template-columns: 100px 50px 100px;n grid-template-rows: 80px auto 80px; n grid-column-gap: 10px;n grid-row-gap: 15px;n}n

line 指的是track之間的線

grid-gap

grid-row-gap 和 grid-column-gap 縮寫

justify-items

在row軸方向對齊content

這個可以理解為 flexbox justify-content 當方向為row時

.container {n justify-items: start | end | center | stretch;n}n

align-items

在column軸方向對齊content

這個可以理解為 flexbox align-items 當方向為row時

同里和flexbox類似

.container {n align-items: start | end | center | stretch;n}n

flexbox 默認items 在每個cell里使用stretch模式

.container {n display: grid;n grid-template-columns: repeat(3, 1fr);n grid-template-rows: repeat(4, 1fr);n justify-items: center;n}n

使用了justify-items: center後就變成inline屬性了

column方向會有些不同

.container {n display: grid;n grid-template-columns: repeat(3, 1fr);n grid-template-rows: repeat(4, 1fr);n justify-items: center;n align-items: center;n}n

1fr 並不明顯

grid-template-rows: repeat(4, 20vw);n

但是設置一下row的高度後就會變成inline模式

grid 保留了justify-content align-content這些屬性的調用

.container {n display: grid;n height: 120vw;n grid-template-columns: repeat(3, 10vw);n grid-template-rows: repeat(4, 20vw);n justify-items: center;n align-items: center;n justify-content: center;n align-content: center;n}n

所以在設置里外不同高度時可以向flexbox一樣設置justify-content

grid-auto-columns

自動設置columns為指定size

grid-auto-rows

自動設置rows為指定size

比如我設置一個2X2 grid 有兩個元素 使用grid-column grid-row指定布局

.container {n display: grid;n grid-template-columns: 60px 60px;n grid-template-rows: 90px 90pxn}nn.item-0 {n grid-column: 1 / 2;n grid-row: 2 / 3;n}n.item-1 {n grid-column: 5 / 6;n grid-row: 2 / 3;n}n

超出的兩行就可以使用grid-auto-columns設置成指定size

grid-auto-columns: 60px;n

給張明白的圖

grid-auto-flow

類似於flex-direction

grid

grid所有屬性集合