上一篇文章中我們了解了定義網格線大小的方法,請看《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中文網其他相關文章!