站長(zhǎng)資訊網(wǎng)css背景方面的知識(shí)我們已經(jīng)學(xué)的差不多了，接下來(lái)我們來(lái)看一下柵格系統(tǒng)的知識(shí)。有需要的小伙伴可以參考參考。
我們先來(lái)看一個(gè)小栗子。
<style> article { display: grid; width: 300px; height: 300px; grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(3,1fr); } div{ background: rgb(208, 159, 255); background-clip: content-box; border: solid 1px rgb(208, 159, 255); padding: 10px; } </style> </head> <body> <article> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </article> </body>
這個(gè)小例子的結(jié)果是
可以看到，我們通過(guò)改了屬性的值，將原本十分漂亮的布局變成了不是特別好看的一個(gè)布局。那我們改變了什么屬性呢？通過(guò)觀察可以看到，改變了grid-template-rows和grid-template-columns的屬性值。
那我們來(lái)看一下這兩個(gè)屬性吧。
grid-template-columns屬性是基于 網(wǎng)格列. 的維度，去定義網(wǎng)格線的名稱(chēng)和網(wǎng)格軌道的尺寸大小。這些值是一個(gè)用空格分隔的列表，其中每個(gè)值指定相應(yīng)列的尺寸。
語(yǔ)法格式是
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
這是這個(gè)屬性值的具體介紹。
-
none：這個(gè)關(guān)鍵字表示不明確的網(wǎng)格。所有的行和其大小都將由grid-auto-rows 屬性隱式的指定。
-
max-content：是一個(gè)用來(lái)表示以網(wǎng)格項(xiàng)的最大的內(nèi)容來(lái)占據(jù)網(wǎng)格軌道的關(guān)鍵字。
-
min-content：是一個(gè)用來(lái)表示以網(wǎng)格項(xiàng)的最大的最小內(nèi)容來(lái)占據(jù)網(wǎng)格軌道的關(guān)鍵字。
-
auto：如果該網(wǎng)格軌道為最大時(shí)，該屬性等同于 <max-content> ，為最小時(shí)，則等同于 <min-content> 。
grid-template-columns屬性看過(guò)了之后，我們?nèi)タ戳硗庖粋€(gè)屬性grid-template-rows。
grid-template-rows 規(guī)定網(wǎng)格布局中的行數(shù)（和高度）。值是用空格分隔的列表，其中每個(gè)值指定相應(yīng)行的高度。
再來(lái)看看這個(gè)屬性的語(yǔ)法格式。
grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;
發(fā)現(xiàn)這個(gè)屬性的值和上一個(gè)屬性的值一模一樣，這樣我們就不用記那么多了。我們來(lái)看一下簡(jiǎn)潔版本
推薦學(xué)習(xí)：css視頻教程
