在CSS網(wǎng)格布局中使用grid-template-*屬性的方法

這篇文章給大家分享的是有關(guān)在CSS網(wǎng)格布局中使用grid-template-*屬性的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

grid-template屬性主要用于創(chuàng)建顯示網(wǎng)格，其中g(shù)rid-template-rows和grid-template-columns用于定義網(wǎng)格的行和列、grid-template-areas屬性用于指定命名網(wǎng)格區(qū)域

在CSS3中引入了新的網(wǎng)格布局（grid layout），主要用來適應(yīng)顯示和設(shè)計(jì)技術(shù)的發(fā)展尤其是對(duì)于一些響應(yīng)式設(shè)計(jì)。它的出現(xiàn)主要是建立

一個(gè)穩(wěn)定可預(yù)料且語義正確的網(wǎng)頁布局模式，用來替代過往表現(xiàn)不穩(wěn)定且繁瑣的table、flow以及JS腳本混合技術(shù)來實(shí)現(xiàn)的網(wǎng)頁動(dòng)態(tài)布局。今天在文章中將要介紹的是網(wǎng)格屬性中的grid-template-*屬性的用法，具有一定參考價(jià)值，希望對(duì)大家有所幫助

顯式和隱式網(wǎng)格

要理解grid-template-*屬性，我們首先需要了解顯式網(wǎng)格和隱式網(wǎng)格的含義

顯式網(wǎng)格用于創(chuàng)建顯式網(wǎng)格的grid-template-*屬性（屬性）定義，其中g(shù)rid-template-rows，grid-template-columns以及grid-template-areas一起定義了明確的網(wǎng)格

隱式網(wǎng)格表示的是網(wǎng)格容器通過向網(wǎng)格添加隱式網(wǎng)格線來生成隱式網(wǎng)格軌道。這些線與顯式網(wǎng)格一起形成隱式網(wǎng)格。換句話說在網(wǎng)格容器內(nèi)有網(wǎng)格單元，使用grid-template-*屬性定位和調(diào)整大小的任何單元格都構(gòu)成顯式網(wǎng)格的一部分，使用此屬性定位/調(diào)整大小的任何網(wǎng)格單元格都不構(gòu)成隱式網(wǎng)格的一部分

grid-template-*屬性的具體用法

grid-template-*屬性用于創(chuàng)建一個(gè)顯式的網(wǎng)格，主要用于定義網(wǎng)格單元的位置和大小

特性：

grid-template-rows （網(wǎng)格模板行）、網(wǎng)格模板列（grid-template-columns）、網(wǎng)格模板區(qū)域（grid-template-areas）

示例：

通過grid-template-rows屬性來創(chuàng)建一行高為100px的網(wǎng)格

.grid {
	display: grid;
	background-color: pink;
	grid-template-rows: 100px;
}

效果圖：

如果想設(shè)置多行，只需要在后面添加另一個(gè)一個(gè)長(zhǎng)度值，以空格分隔第一行

.grid {
	display: grid;
	background-color: pink;
	grid-template-rows: 100px 50px;
}
.grid2{
	background-color: skyblue;
}

效果圖：

grid-template-columns屬性用于設(shè)置網(wǎng)格容器的列屬性，其實(shí)就相當(dāng)于列的寬度。當(dāng)我們需要幾列展示時(shí)，就設(shè)置幾個(gè)值

.grid {
  display: grid;
  grid-gap: 10px; /* add spacing for better visibility */
  grid-auto-rows: 30px;
  grid-template-rows: 100px 100px ;
  grid-template-columns: 150px 150px;
  background-color: skyblue;

}
.cell{  border:5px solid pink;}

效果圖：

感謝各位的閱讀！關(guān)于在CSS網(wǎng)格布局中使用grid-template-*屬性的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！