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

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

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

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