上一篇文章中我們了解了定義網格線大小的方法，請看《css如何定義網格線大小》。這次我們來了解設定指定網格的大小和位置的方法，有需要的可以參考。
之前我們去了一個如何去定義網格線的大小，這次來點不一樣的。讓我們來看看一個小栗子。
<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>這個小範例的結果是
#這個範例與上一篇文章的例子極為相似，都是300* 300的盒子裡，都是有幾個盒子，不同的可能就是這次只有8個盒子，而上一次有9個盒子吧。還有什麼不同嗎？我們看一下一號小盒子，它是不是多佔了一個小格子，難怪沒有了9號小盒子。
那我們來看看是什麼屬性導致的吧。
grid-row 屬性是一種 grid-row-start (en-US) 和 grid-row-end (en-US) 的縮寫（shorthand ）形式，它定義了網格單元與網格行（row）相關的尺寸和位置，可以通過在網格佈局中的基線（line），跨度（span），或者什麼也不做（自動），從而指定 grid area 的行起始與行結束。
如果指定了兩個
它是以下屬性的簡寫屬性：
grid-row-start
grid-row-end
我們來看看這個屬性的語法格式。
grid-row: grid-row-start / grid-row-end;
其中grid-row-start代表著從哪行開始顯示項目；grid-row-end代表著在哪條行線上停止顯示項目，或橫跨多少行。
要注意的是：
IE11 不支援網格單元的自動佈置。除非明確地註解 -ms-grid-column 和 -ms-grid-row，否則所有單元都會在網格的第一行/列結束。
推薦學習：css影片教學
#以上是css如何設定指定網格的大小和位置的詳細內容。更多資訊請關注PHP中文網其他相關文章！
