Tailwind CSS - 網格自動列

Tailwind CSS 網格自動列 是一個實用程式類，用於指定隱式建立的網格列的大小。

Tailwind CSS 網格自動列類

以下是用於設定隱式建立的網格列大小的 Tailwind CSS 網格自動列 類列表。

類	CSS 屬性
auto-cols-auto	grid-auto-columns: auto;
auto-cols-min	grid-auto-columns: min-content;
auto-cols-max	grid-auto-columns: max-content;
auto-cols-fr	grid-auto-columns: minmax(0, 1fr);

Tailwind CSS 網格自動列類的功能

auto-cols-auto: 將網格列的寬度設定為其內容的寬度。
auto-cols-min: 將網格列的寬度設定為適應其內容所需的最小寬度。
auto-cols-max: 將網格列的寬度設定為適應其內容所需的最大寬度。
auto-cols-fr 根據可用空間的相等分數設定列寬。

Tailwind CSS 網格自動列類示例

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

調整自動建立的網格列大小

auto-cols-auto 實用程式用於自動調整顯式建立的網格列的大小，如下面的示例所示。

示例

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Auto Cols Auto Class
    </h2>
    <div class="grid grid-flow-col auto-cols-auto gap-4 p-4">
        <div class="bg-green-300 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2 with more content</div>
        <div class="bg-green-300 p-4">Item 3</div>
    </div>
</body>

</html>

最小化自動建立的網格列

auto-cols-min 實用程式用於自動調整顯式建立的網格列的大小，如下面的示例所示。

示例

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Auto Cols min Class
    </h2>
    
    <!--The auto-cols-min class minimizes the width of 
           automatically created grid columns to fit their content.-->
    
    <div class="grid grid-flow-col auto-cols-min gap-4 p-4">
        <div class="bg-green-300 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2 with more content</div>
        <div class="bg-green-300 p-4">Item 3</div>
    </div>
</body>

</html>

最大化自動建立的網格列

auto-cols-max 實用程式用於自動調整顯式建立的網格列的大小，如下面的示例所示。

示例

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Auto Cols max Class
    </h2>
    
    <!--The auto-cols-max class maximize the width of 
           automatically created grid columns to fit their content.-->
    
    <div class="grid grid-flow-col auto-cols-max gap-4 p-4">
        <div class="bg-green-300 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2 with more content</div>
        <div class="bg-green-300 p-4">Item 3</div>
    </div>
</body>

</html>

將自動建立的網格列分成分數

auto-cols-fr 實用程式用於自動調整顯式建立的網格列的大小，如下面的示例所示。

示例

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Auto Cols Fr Class
    </h2>
    
    <!--The auto-cols-fr class equally fraction the
           available space between grid columns-->
    
    <div class="grid grid-flow-col auto-cols-fr gap-4 p-4">
        <div class="bg-green-300 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2 with more content</div>
        <div class="bg-green-300 p-4">Item 3</div>
    </div>
</body>

</html>

列印頁面