Tailwind CSS - 網格模板列

上一頁
下一頁

Tailwind CSS 網格模板列是一個實用程式類，用於指定網格佈局中列的數量和大小。

Tailwind CSS 網格模板列類

以下是定義網格佈局中列的Tailwind CSS 網格模板列類的列表。

類名 CSS 屬性
grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4 grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5 grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6 grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7 grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8 grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9 grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10 grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11 grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12 grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-none grid-template-columns: none;
grid-cols-subgrid grid-template-columns: subgrid;

Tailwind CSS 網格模板列的功能

  • grid-cols-*：此類用於建立具有 n 個大小相等的列的網格佈局。*在這裡代表列的數量範圍為1 到 12。
  • grid-cols-none：此類替換 CSS grid-template-columns: none; 屬性。此類用於停用網格佈局的列實用程式。
  • grid-cols-subgrid：此類替換 CSS grid-template-columns: subgrid; 屬性。此類允許網格項從其父網格繼承網格列軌道。

Tailwind CSS 網格模板列類示例

以下示例將說明 Tailwind CSS 網格模板列類實用程式。

在網格中指定列

下面的示例說明了grid-cols-* 的用法，在這裡您可以從上表中定義一個有效數字來指定要放置的列數。在此示例中，我們將建立 4 列。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid
    </h2>
    <div class="grid grid-cols-4 gap-4">
        <div class="bg-lime-500 p-4">1</div>
        <div class="bg-violet-500 p-4">2</div>
        <div class="bg-green-500 p-4">3</div>
        <div class="bg-pink-500 p-4">4</div>
        <div class="bg-lime-300 p-4">5</div>
        <div class="bg-violet-300 p-4">6</div>
        <div class="bg-green-300 p-4">7</div>
        <div class="bg-pink-300 p-4">8</div>
    </div>
</body>

</html>

停用列實用程式

下面的示例演示了 **grid-cols-none** 類的用法，它將停用網格列。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Col None
    </h2>
    <div class="grid grid-cols-none gap-4">
        <div class="bg-lime-500 p-4">1</div>
        <div class="bg-violet-500 p-4">2</div>
        <div class="bg-green-500 p-4">3</div>
        <div class="bg-pink-500 p-4">4</div>
        <div class="bg-lime-300 p-4">5</div>
        <div class="bg-violet-300 p-4">6</div>
        <div class="bg-green-300 p-4">7</div>
        <div class="bg-pink-300 p-4">8</div>
    </div>
</body>

</html>

採用列軌道

要採用列軌道，可以使用 **grid-cols-subgrid** 類。在下面的示例中，我們使用了 grid-cols-subgrid 類來實現。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Col Subgrid
    </h2>
    <div class="grid grid-cols-4 gap-4">
        <div class="bg-green-500 p-4">01</div>
        <div class="bg-green-500 p-4">02</div>
        <div class="bg-green-500 p-4">03</div>
        <div class="bg-green-500 p-4">04</div>
        <div class="bg-green-500 p-4">05</div>
        <div class="grid grid-cols-subgrid gap-4 col-span-3">
            <div class="col-start-2 bg-green-300 p-4">06</div>
        </div>
    </div>
</body>

</html>
列印頁面
上一頁
下一頁
廣告