Tailwind CSS Grid Column Start / End

Grid Column Start / End

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

跨列

使用 ?col-span-{n}? 功能類使元素跨越 n 列。

<div class="grid grid-cols-3 gap-4">
  <div class="...">1</div>
  <div class="...">2</div>
  <div class="...">3</div>
  <div class="col-span-2 ...">4</div>
  <div class="...">5</div>
  <div class="...">6</div>
  <div class="col-span-2 ...">7</div>
</div>

起始與結(jié)束線

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

請注意，CSS 網(wǎng)格線從 1 開始，而不是 0，所以 6 列網(wǎng)格中的全寬元素將從第 1 條網(wǎng)格線開始，第 7 條網(wǎng)格線結(jié)束。

<div class="grid grid-cols-6 gap-4">
  <div class="col-start-2 col-span-4 ...">1</div>
  <div class="col-start-1 col-end-3 ...">2</div>
  <div class="col-end-7 col-span-2 ...">3</div>
  <div class="col-start-1 col-end-7 ...">4</div>
</div>

響應式

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

<div class="col-span-2 md:col-span-6"></div>

關(guān)于 Tailwind 的響應式設計功能的更多信息，請查看 響應式設計 文檔。

自定義

默認情況下，Tailwind 包含用于處理最多 12 列的網(wǎng)格的網(wǎng)格列實用程序。您可以通過自定義 Tailwind 主題配置的 ?gridColumn?、?gridColumnStart ?和 ?gridColumnEnd ?部分來更改、添加或刪除這些。

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

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

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

要添加新的 ?col-start-{n}? 功能類，請使用 Tailwind 主題配置的 ?gridColumnStart ?部分。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridColumnStart: {
         '13': '13',
         '14': '14',
         '15': '15',
         '16': '16',
         '17': '17',
        }
      }
    }
  }

要添加新的 ?col-end-{n}? 功能類，請使用 Tailwind 主題配置的 ?gridColumnEnd ?部分。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridColumnEnd: {
         '13': '13',
         '14': '14',
         '15': '15',
         '16': '16',
         '17': '17',
        }
      }
    }
  }

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

變體

默認情況下，只為 grid-column 功能生成響應式變體。

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

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
     gridColumn: ['responsive', 'hover'],
     gridColumnStart: ['responsive', 'hover'],
     gridColumnEnd: ['responsive', 'hover'],
    }
  }

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

禁用

如果您不打算在您的項目中使用 grid-column 功能，您可以通過在配置文件的 ?corePlugins ?部分將 ?gridColumn?, ?gridColumnStart ?和 ?gridColumnEnd? 屬性設置為 ?false? 來完全禁用它們：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     gridColumn: false,
     gridColumnStart: false,
     gridColumnEnd: false,
    }
  }