第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

fr單位含義即為flex中的份數(shù), 占比的意思;

gr指代網(wǎng)格數(shù), 還不是規(guī)范, 不應(yīng)當(dāng)使用;

items 屬性

測測測惡惡惡惡

1.grid 優(yōu)勢

2.grid vs flexbox

3.瀏覽器兼容

網(wǎng)格定義-

Grid 布局的優(yōu)勢

1. 固定或彈性的軌道尺寸

2. 定位項(xiàng)目

3. 創(chuàng)建額外的軌道來保存內(nèi)容

4. 對齊控制

5. 控制重疊內(nèi)容（z-index）
   

我覺得網(wǎng)格布局還有很多需要升級的地方：

1

? ? ? ?背景、邊框。

? ? ? ?目前網(wǎng)格布局只是虛擬的存在，邊框背景只能由項(xiàng)目元素來設(shè)置，而無法直接在網(wǎng)格上設(shè)置，就像表格一樣可以設(shè)置某一行或某一列的背景邊框，網(wǎng)格本身是無色的，做不到。

2

? ? ? ?單元格、區(qū)域內(nèi)多元素

? ? ? ?目前，一個(gè)單元格或區(qū)域內(nèi)，只能裝上一個(gè)項(xiàng)目元素；如果想要在一塊區(qū)域內(nèi)布局多個(gè)元素，只能給它們套上一層父元素來解決。

? ? ? 所以需要一個(gè)單元格，同時(shí)容納多個(gè)元素

3

? ? ? 空間化

? ? ? 一個(gè)空間可以包含多個(gè)單元格、區(qū)域，可以像一個(gè)普通元素一樣設(shè)置背景、邊框、字體，等所有css屬性

grid-auto

grid-auto-clolumn |?grid-auto-rows

指定自動生成的網(wǎng)格軌道(隱式網(wǎng)格軌道)的大小，不會控制非隱式網(wǎng)格軌道

grid-auto-flow 自動布局的方式

row （根據(jù)需要填加新行）| column （根據(jù)需要填加新列）| dense（自動）

grid

gris-teamplte-rows |?grid-template-clomns | grids-temaplte-areas | grid-auto-row | grid-auto-columns | grid-auto-flow的簡寫

justify-items

行軸上的每個(gè)items內(nèi)容對齊方式

stretch(默認(rèn)值)/start/end/center

align-items

縱軸上的每個(gè)items內(nèi)容對齊方式

stretch(默認(rèn)值)/start/end/center

place-items?align-items |?justify-items簡寫

justify-content

設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格沿行軸對齊網(wǎng)格的對齊方式

stretch(默認(rèn)值)/start/end/center/space-around(等間隙，邊緣間隙為中間間隙一半)/space-between（等間隙，無邊緣）/space-evenly(包括邊緣，等間隙)

align-content

設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格沿縱軸對齊網(wǎng)格的對齊方式

stretch(默認(rèn)值)/start/end/center

place-content?align-content|?justify-content簡寫

gap? grid-column-gap / grid-row-gap?

指定網(wǎng)格線的大小，（列行之間的間距寬度）

如果設(shè)置一個(gè)值則代表行列都是一個(gè)值

grid-template

grid-template-rows、 gird-teamplate-columns、 gird-teamplate-ares的簡寫

不建議使用，寫一起容易混淆

grid-teamplate-areas?

1. grid-area定義的網(wǎng)格區(qū)域名稱

2. .空的網(wǎng)格單元

3. none 沒有定義網(wǎng)格區(qū)域

4. 

grid-template-columns 的auto為0的例子

屬性值

none：將所有子屬性設(shè)置為其初始值

<grid-template-rows>/<grid-template-columns>：將grid-template-rows 和grid-template-columns分別設(shè)置未指定值，將所有其他子鼠星設(shè)置為起初始值

<grid-auto-flow>[<grid-auto-rows>[/<grid-auto-columns>]]：接受所有與grid-auto-flow,grid-auto-rows和grid-auto-columns相同的值。如果省略grid-auto-columns,則將其設(shè)置未grid-auto-rows制定的值。如果兩者都被省略，則他們被設(shè)置未他們的初始值

.container{

gird:none | <grid-template-rows> / <grid-template-colums>|

<grid-auto-flow> [<grid-auto-rows>[/<grid-auto-columns>]]}