首頁 >web前端 >前端問答 >css如何設定指定網格的大小和位置

css如何設定指定網格的大小和位置

醉折花枝作酒筹原創: 2021-08-13 17:35:063448瀏覽

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

這個小範例的結果是

css如何設定指定網格的大小和位置

#這個範例與上一篇文章的例子極為相似，都是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-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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css如何定義網格線大小下一篇：css如何定義網格線大小

看更多