Tailwind CSS Grid Row Start / End

Grid Row Start / End

用于控制在網(wǎng)格行中元素的大小和放置方式的功能類。

跨行

使用 ?row-span-{n}? 功能類使一個(gè)元素跨越 n 行。

<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="row-span-3 ...">1</div>
  <div class="col-span-2 ...">2</div>
  <div class="row-span-2 col-span-2 ...">3</div>
</div>

起始與結(jié)束線

使用 ?row-start-{n}? 和 ?row-end-{n}? 功能類，使元素以第 n 條網(wǎng)格線為起點(diǎn)或終點(diǎn)。這些功能類也可以與 ?row-span-{n}? 功能類結(jié)合使用，來跨越特定數(shù)量的行。

請(qǐng)注意，CSS 網(wǎng)格線從 1 開始，而不是 0，所以 3 行網(wǎng)格中的全高元素將從第 1 條網(wǎng)格線開始，第 4 條網(wǎng)格線結(jié)束。

<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="row-start-2 row-span-2 ...">1</div>
  <div class="row-end-3 row-span-2 ...">2</div>
  <div class="row-start-1 row-end-4 ...">3</div>
</div>

響應(yīng)式

要在特定的斷點(diǎn)處控制元素行的放置方式，可以在任何現(xiàn)有的 grid-row 功能類前添加 ?{screen}:? 前綴。例如，使用 ?md:row-span-3? 來僅在中等尺寸及以上的屏幕上應(yīng)用 ?col-span-3? 功能類。

<div class="grid grid-rows-3 ...">
  <div class="row-span-3 md:row-span-3 ..."></div>
</div>

關(guān)于 Tailwind 的響應(yīng)式設(shè)計(jì)功能的更多信息，請(qǐng)查看 響應(yīng)式設(shè)計(jì) 文檔。

自定義

默認(rèn)情況下，Tailwind 包含用于處理具有多達(dá) 6 個(gè)顯式行的網(wǎng)格的網(wǎng)格行實(shí)用程序。您可以通過自定義 Tailwind 主題配置的 ?gridRow?、?gridRowStart ?和 ?gridRowEnd ?部分來更改、添加或刪除這些。

為了創(chuàng)建更多的 ?row-{value}? 功能類來直接控制 ?grid-row? 簡(jiǎn)寫屬性，請(qǐng)自定義 Tailwind 主題配置的 ?gridRow ?部分。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridRow: {
         'span-16': 'span 16 / span 16',
        }
      }
    }
  }

我們?cè)趦?nèi)部將其用于 ?row-span-{n}? 功能。請(qǐng)注意，因?yàn)檫@直接配置了 ?grid-row? 速記屬性，所以我們直接在值名中包含了 ?span ?這個(gè)詞，而不是自動(dòng)加入到類名中。這意味著您可以自由地添加您想做的任何事情—它們不只是 ?span ?功能。

要添加新的 ?row-start-{n}? 功能類，請(qǐng)使用 Tailwind 主題配置的 ?gridRowStart ?部分。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridRowStart: {
         '8': '8',
         '9': '9',
         '10': '10',
         '11': '11',
         '12': '12',
         '13': '13',
        }
      }
    }
  }

要添加新的 ?row-end-{n}? 功能類，請(qǐng)使用 Tailwind 主題配置的 ?gridRowEnd ?部分。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridRowEnd: {
         '8': '8',
         '9': '9',
         '10': '10',
         '11': '11',
         '12': '12',
         '13': '13',
        }
      }
    }
  }

在 主題自定義文檔 中了解更多關(guān)于自定義默認(rèn)主題的信息。

變體

默認(rèn)情況下，只為 grid-row 功能生成響應(yīng)式變體。

您可以通過修改 ?tailwind.config.js? 文件中 ?variants ?部分的 ?gridRow?、?gridRowStart ?和 ?gridRowEnd ?屬性來控制為 grid-row 功能生成哪些變體。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
     gridRow: ['responsive', 'hover'],
     gridRowStart: ['responsive', 'hover'],
     gridRowEnd: ['responsive', 'hover'],
    }
  }

在 配置變體文檔 中了解更多關(guān)于配置變體的信息。

禁用

如果您不打算在您的項(xiàng)目中使用 grid-row 功能，您可以通過在配置文件的 ?corePlugins? 部分將 ?gridRow?, ?gridRowStart ?和 ?gridRowEnd ?屬性設(shè)置為 ?false ?來完全禁用它們：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     gridRow: false,
     gridRowStart: false,
     gridRowEnd: false,
    }
  }