css如何設定指定網格的大小和位置-前端問答-PHP中文網

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

醉折花枝作酒筹

發布： 2021-08-13 17:36:16

原創

3202 人瀏覽過

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

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

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