本文主要介紹網格項的相關屬性:
以上四組屬性與網格線密切相關,定義了網格項如何根據網格線定位位置。
語法如下:
屬性值描述:
下面的例子:
項目可以相互重疊。您可以使用z-index來控制它們的堆疊順序。
上面介紹的grid-column-start/grid-row-start、grid-column-end/ grid-row-end四個屬性也可以用grid-row-start和grid-row-end來縮寫。
語法:
屬性值:
下面的例子:
使用此屬性命名網格區域,以便在由grid-template-areas屬性創建的模板中引用它,或者將其縮寫為grid-row-start+grid-column-start+grid-row-end+grid-column-end。
語法如下:
屬性值:
下面的例子:
壹種給網格區域命名的方法
作為速記
/snippet/CSS/complete-guide-grid/# prop-grid-template-areas
https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid