當前位置:成語大全網 - 漢語詞典 - 前端入門-css網格項目屬性

前端入門-css網格項目屬性

第壹部分介紹了網格容器和網格軌跡相關屬性的用法。如果對網格不熟悉,建議看壹下之前的文章——CSS網格網格基礎知識,前端介紹——CSS網格賽道詳細介紹了學習網格的基礎知識。

本文主要介紹網格項的相關屬性:

以上四組屬性與網格線密切相關,定義了網格項如何根據網格線定位位置。

語法如下:

屬性值描述:

下面的例子:

項目可以相互重疊。您可以使用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