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

首頁

web前端

前端問答

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

醉折花枝作酒筹

Aug 13, 2021 pm 05:35 PM

css

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7358

Java教學

1628

CakePHP 教程

1353

Laravel 教程

1265

PHP教程

1214

Related knowledge

vue中placeholder是什麼意思 May 07, 2024 am 09:57 AM

在 Vue.js 中，placeholder 屬性指定輸入元素的佔位符文本，當使用者未輸入內容時顯示，提供輸入提示或範例，提高表單可存取性。其用法為在輸入元素中設定 placeholder 屬性，並可使用 CSS 自訂外觀。最佳實踐包括與輸入相關、簡短清晰、避免預設文本，並考慮可訪問性。

js中span是什麼意思 May 06, 2024 am 11:42 AM

span 標籤可為文字新增樣式、屬性或行為，用於：新增樣式，如顏色、字體大小。設定屬性，如 id、class 等。關聯行為，如點擊、懸停等。標記文本，以便進一步處理或引用。

js中rem是什麼意思 May 06, 2024 am 11:30 AM

CSS 中的 REM 是一種相對於根元素（html）字體大小的相對單位。它具有以下特點：相對根元素字體大小，不受父元素影響。當根元素字體大小改變時，使用 REM 的元素也會隨之調整。可用於任何 CSS 屬性。使用 REM 的優點包括：回應性：保持不同裝置和螢幕大小上的文字可讀性。一致性：確保整個網站字體大小一致。可擴充性：透過調整根元素字體大小輕鬆變更全域字體大小。

vue中引入圖片的方法 May 02, 2024 pm 10:48 PM

Vue 中引入圖片有五種方法：透過 URL、require 函數、靜態檔案、v-bind 指令和 CSS 背景圖片。可以在 Vue 的計算屬性或偵聽器中處理動態圖片，並使用打包工具優化圖片載入。確保路徑正確，否則會顯示載入錯誤。

js中什麼是節點 May 07, 2024 pm 09:06 PM

節點是 JavaScript DOM 中表示 HTML 元素的實體。它們代表頁面中的特定元素，可用於存取和操作該元素。常見的節點類型包括元素節點、文字節點、註解節點和文件節點。透過 DOM 方法（如 getElementById()），可以存取節點並對其進行操作，包括修改屬性、新增/移除子節點、插入/替換節點和克隆節點。節點遍歷有助於在 DOM 結構中導航。節點在動態建立頁面內容、事件處理、動畫和資料綁定方面非常有用。