站長資訊網(wǎng)上一篇文章中我們了解了定義網(wǎng)格線大小的方法，請(qǐng)看《css如何定義網(wǎng)格線大小》。這次我們來了解一下設(shè)置指定網(wǎng)格的大小和位置的方法，有需要的可以參考參考。
之前我們?nèi)チ艘粋€(gè)如何去定義網(wǎng)格線的大小，這次來點(diǎn)不一樣的。我們來看看一個(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; } div:first-child{ grid-row: 1 / span 2; } </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> </article> </body>
這個(gè)小例子的結(jié)果是
這個(gè)例子與上一篇文章的例子極為相似，都是300*300的盒子里，都是有幾個(gè)盒子，不同的可能就是這次只有8個(gè)盒子，而上一次有9個(gè)盒子吧。還有什么不同嗎？我們看一下一號(hào)小盒子，它是不是多占了一個(gè)小格子，難怪沒有了9號(hào)小盒子。
那我們來看一下是什么屬性導(dǎo)致的吧。
grid-row 屬性是一種 grid-row-start (en-US) 和 grid-row-end (en-US) 的縮寫（shorthand）形式，它定義了網(wǎng)格單元與網(wǎng)格行（row）相關(guān)的尺寸和位置，可以通過在網(wǎng)格布局中的基線（line），跨度（span），或者什么也不做（自動(dòng)），從而指定 grid area 的行起始與行結(jié)束。
如果指定了兩個(gè) <grid-line> 值，那么斜杠號(hào)前的值就被指定為 grid-row-start，斜杠后面的值就被指定為 grid-row-end 的值。
它是以下屬性的簡寫屬性：
-
grid-row-start
-
grid-row-end
我們來看看這個(gè)屬性的語法格式。
grid-row: grid-row-start / grid-row-end;
其中g(shù)rid-row-start代表著從哪行開始顯示項(xiàng)目；grid-row-end代表著在哪條行線上停止顯示項(xiàng)目，或者橫跨多少行。
需要注意的是：
IE11 不支持網(wǎng)格單元的自動(dòng)布置。除非顯式地注釋 -ms-grid-column 和 -ms-grid-row，否則所有單元都會(huì)在網(wǎng)格的第一行/列結(jié)束。
推薦學(xué)習(xí)：css視頻教程
