- Tailwind CSS 教程
- Tailwind CSS - 首頁
- Tailwind CSS - 路線圖
- Tailwind CSS - 簡介
- Tailwind CSS - 安裝
- Tailwind CSS - 編輯器設定
- Tailwind CSS - 核心概念
- Tailwind CSS - 實用優先基礎
- Tailwind CSS - 懸停、焦點和其他狀態
- Tailwind CSS - 響應式設計
- Tailwind CSS - 深色模式
- Tailwind CSS - 重用樣式
- Tailwind CSS - 新增自定義樣式
- Tailwind CSS - 函式和指令
- Tailwind CSS - 自定義
- Tailwind CSS - 配置
- Tailwind CSS - 內容配置
- Tailwind CSS - 主題配置
- Tailwind CSS - 自定義螢幕
- Tailwind CSS - 自定義顏色
- Tailwind CSS - 自定義間距
- Tailwind CSS - 外掛
- Tailwind CSS - 預設
- Tailwind CSS - 基礎樣式
- Tailwind CSS - 預載入
- Tailwind CSS - 佈局
- Tailwind CSS - 寬高比
- Tailwind CSS - 容器
- Tailwind CSS - 列
- Tailwind CSS - 分隔符後
- Tailwind CSS - 分隔符前
- Tailwind CSS - 分隔符內
- Tailwind CSS - 邊框裝飾分隔符
- Tailwind CSS - 盒子大小
- Tailwind CSS - 顯示
- Tailwind CSS - 浮動
- Tailwind CSS - 清除浮動
- Tailwind CSS - 隔離
- Tailwind CSS - 物件適配
- Tailwind CSS - 物件位置
- Tailwind CSS - 溢位
- Tailwind CSS - 滾動溢位行為
- Tailwind CSS - 定位
- Tailwind CSS - 上/右/下/左
- Tailwind CSS - 可見性
- Tailwind CSS - Z 軸索引
- Tailwind CSS - Flexbox 和 Grid
- Tailwind CSS - Flex 基準線
- Tailwind CSS - Flex 方向
- Tailwind CSS - Flex 換行
- Tailwind CSS - Flex
- Tailwind CSS - Flex 伸長
- Tailwind CSS - Flex 壓縮
- Tailwind CSS - 順序
- Tailwind CSS - 網格模板列
- Tailwind CSS - 網格列開始/結束
- Tailwind CSS - 網格模板行
- Tailwind CSS - 網格行開始/結束
- Tailwind CSS - 網格自動流動
- Tailwind CSS - 網格自動列
- Tailwind CSS - 網格自動行
- Tailwind CSS - 間隙
- Tailwind CSS - 內容對齊
- Tailwind CSS - 專案對齊
- Tailwind CSS - 自身對齊
- Tailwind CSS - 內容排列
- Tailwind CSS - 專案排列
- Tailwind CSS - 自身排列
- Tailwind CSS - 內容放置
- Tailwind CSS - 專案放置
- Tailwind CSS - 自身放置
- Tailwind CSS - 間距
- Tailwind CSS - 內邊距
- Tailwind CSS - 外邊距
- Tailwind CSS - 元素間距
- Tailwind CSS - 大小
- Tailwind CSS - 寬度
- Tailwind CSS - 最小寬度
- Tailwind CSS - 最大寬度
- Tailwind CSS - 高度
- Tailwind CSS - 最小高度
- Tailwind CSS - 最大高度
- Tailwind CSS - 尺寸
- Tailwind CSS - 排版
- Tailwind CSS - 字體系列
- Tailwind CSS - 字型大小
- Tailwind CSS - 字型平滑
- Tailwind CSS - 字型樣式
- Tailwind CSS - 字型粗細
- Tailwind CSS - 字型變體數字
- Tailwind CSS - 字間距
- Tailwind CSS - 行夾緊
- Tailwind CSS - 行高
- Tailwind CSS - 列表樣式圖片
- Tailwind CSS - 列表樣式位置
- Tailwind CSS - 列表樣式型別
- Tailwind CSS - 文字對齊
- Tailwind CSS - 文字顏色
- Tailwind CSS - 文字裝飾
- Tailwind CSS - 文字裝飾顏色
- Tailwind CSS - 文字裝飾樣式
- Tailwind CSS - 文字裝飾粗細
- Tailwind CSS - 文字下劃線偏移
- Tailwind CSS - 文字轉換
- Tailwind CSS - 文字溢位
- Tailwind CSS - 文字換行
- Tailwind CSS - 文字縮排
- Tailwind CSS - 垂直對齊
- Tailwind CSS - 空格
- Tailwind CSS - 斷詞
- Tailwind CSS - 連字元
- Tailwind CSS - 內容
- Tailwind CSS - 背景
- Tailwind CSS - 背景附件
- Tailwind CSS - 背景剪裁
- Tailwind CSS - 背景顏色
- Tailwind CSS - 背景原點
- Tailwind CSS - 背景位置
- Tailwind CSS - 背景重複
- Tailwind CSS - 背景大小
- Tailwind CSS - 背景圖片
- Tailwind CSS - 漸變顏色停止
- Tailwind CSS - 邊框
- Tailwind CSS - 邊框半徑
- Tailwind CSS - 邊框寬度
- Tailwind CSS - 邊框顏色
- Tailwind CSS - 邊框樣式
- Tailwind CSS - 分隔線寬度
- Tailwind CSS - 分隔線顏色
- Tailwind CSS - 分隔線樣式
- Tailwind CSS - 輪廓寬度
- Tailwind CSS - 輪廓顏色
- Tailwind CSS - 輪廓樣式
- Tailwind CSS - 輪廓偏移
- Tailwind CSS - 環寬度
- Tailwind CSS - 環顏色
- Tailwind CSS - 環偏移寬度
- Tailwind CSS - 環偏移顏色
- Tailwind CSS - 效果
- Tailwind CSS - 盒子陰影
- Tailwind CSS - 盒子陰影顏色
- Tailwind CSS - 不透明度
- Tailwind CSS - 混合模式
- Tailwind CSS - 背景混合模式
- Tailwind CSS - 濾鏡
- Tailwind CSS - 模糊
- Tailwind CSS - 亮度
- Tailwind CSS - 對比度
- Tailwind CSS - 投影
- Tailwind CSS - 灰度
- Tailwind CSS - 色調旋轉
- Tailwind CSS - 反轉
- Tailwind CSS - 飽和度
- Tailwind CSS - 棕褐色
- Tailwind CSS - 背景模糊
- Tailwind CSS - 背景亮度
- Tailwind CSS - 背景對比度
- Tailwind CSS - 背景灰度
- Tailwind CSS - 背景色調旋轉
- Tailwind CSS - 背景反轉
- Tailwind CSS - 背景不透明度
- Tailwind CSS - 背景飽和度
- Tailwind CSS - 背景棕褐色
- Tailwind CSS - 表格
- Tailwind CSS - 邊框摺疊
- Tailwind CSS - 邊框間距
- Tailwind CSS - 表格佈局
- Tailwind CSS - 標題位置
- Tailwind CSS - 過渡和動畫
- Tailwind CSS - 過渡屬性
- Tailwind CSS - 過渡持續時間
- Tailwind CSS - 過渡時間函式
- Tailwind CSS - 過渡延遲
- Tailwind CSS - 動畫
- Tailwind CSS - 變換
- Tailwind CSS - 縮放
- Tailwind CSS - 旋轉
- Tailwind CSS - 平移
- Tailwind CSS - 傾斜
- Tailwind CSS - 變換原點
- Tailwind CSS - 互動性
- Tailwind CSS - 重音顏色
- Tailwind CSS - 外觀
- Tailwind CSS - 游標
- Tailwind CSS - 插入符號顏色
- Tailwind CSS - 指標事件
- Tailwind CSS - 調整大小
- Tailwind CSS - 滾動行為
- Tailwind CSS - 滾動邊距
- Tailwind CSS - 滾動填充
- Tailwind CSS - 滾動捕捉對齊
- Tailwind CSS - 滾動捕捉停止
- Tailwind CSS - 滾動捕捉型別
- Tailwind CSS - 觸控操作
- Tailwind CSS - 使用者選擇
- Tailwind CSS - 將更改
- Tailwind CSS - SVG
- Tailwind CSS - 填充
- Tailwind CSS - 描邊
- Tailwind CSS - 描邊寬度
- Tailwind CSS - 可訪問性
- Tailwind CSS - 螢幕閱讀器
- Tailwind CSS - 強制顏色調整
- Tailwind CSS - 附加
- Tailwind CSS - 與預處理器一起使用
- Tailwind CSS - 最佳化生產環境
- Tailwind CSS - 參考
- Tailwind CSS - 核心概念
- Tailwind CSS - 自定義
- Tailwind CSS - 佈局
- Tailwind CSS - Flexbox 和 Grid
- Tailwind CSS - 間距
- Tailwind CSS - 大小
- Tailwind CSS - 排版
- Tailwind CSS - 背景
- Tailwind CSS - 邊框
- Tailwind CSS - 效果
- Tailwind CSS - 濾鏡
- Tailwind CSS - 表格
- Tailwind CSS - 過渡和動畫
- Tailwind CSS - 變換
- Tailwind CSS - 互動性
- Tailwind CSS - 資源
- Tailwind CSS - 討論
- Tailwind CSS - 有用資源
Tailwind CSS - 網格列開始/結束
Tailwind CSS 網格列開始/結束 是一個實用程式類，用於指定跨網格列的列的排列和大小。
Tailwind CSS 網格模板列類
以下是定義網格佈局中列的排列和大小的Tailwind CSS 網格模板列類的列表。
| 類 | CSS 屬性 |
|---|---|
| col-auto | grid-column: auto; |
| col-span-1 | grid-column: span 1 / span 1; |
| col-span-2 | grid-column: span 2 / span 2; |
| col-span-3 | grid-column: span 3 / span 3; |
| col-span-4 | grid-column: span 4 / span 4; |
| col-span-5 | grid-column: span 5 / span 5; |
| col-span-6 | grid-column: span 6 / span 6; |
| col-span-7 | grid-column: span 7 / span 7; |
| col-span-8 | grid-column: span 8 / span 8; |
| col-span-9 | grid-column: span 9 / span 9; |
| col-span-10 | grid-column: span 10 / span 10; |
| col-span-11 | grid-column: span 11 / span 11; |
| col-span-12 | grid-column: span 12 / span 12; |
| col-span-full | grid-column: 1 / -1; |
| col-start-1 | grid-column-start: 1; |
| col-start-2 | grid-column-start: 2; |
| col-start-3 | grid-column-start: 3; |
| col-start-4 | grid-column-start: 4; |
| col-start-5 | grid-column-start: 5; |
| col-start-6 | grid-column-start: 6; |
| col-start-7 | grid-column-start: 7; |
| col-start-8 | grid-column-start: 8; |
| col-start-9 | grid-column-start: 9; |
| col-start-10 | grid-column-start: 10; |
| col-start-11 | grid-column-start: 11; |
| col-start-12 | grid-column-start: 12; |
| col-start-13 | grid-column-start: 13; |
| col-start-auto | grid-column-start: auto; |
| col-end-1 | grid-column-end: 1; |
| col-end-2 | grid-column-end: 2; |
| col-end-3 | grid-column-end: 3; |
| col-end-4 | grid-column-end: 4; |
| col-end-5 | grid-column-end: 5; |
| col-end-6 | grid-column-end: 6; |
| col-end-7 | grid-column-end: 7; |
| col-end-8 | grid-column-end: 8; |
| col-end-9 | grid-column-end: 9; |
| col-end-10 | grid-column-end: 10; |
| col-end-11 | grid-column-end: 11; |
| col-end-12 | grid-column-end: 12; |
| col-end-13 | grid-column-end: 13; |
| col-end-auto | grid-column-end: auto; |
Tailwind CSS 網格列開始和結束的功能
- col-auto: 此類替換 CSS grid-column: auto; 屬性。此類允許元素根據其內容自動跨列。
- col-span-*: 此類用於指定網格佈局中應跨越的列數。{*} 代表列數範圍為 1 到 12。
- col-start-*: 此類用於指定元素在網格佈局中列線上的起始位置。{*} 代表位置範圍為 1 到 13。
- col-end-*: 此類用於指定元素在網格佈局中的結束位置。{*} 代表位置範圍為 1 到 13。
Tailwind CSS 網格列開始和結束類示例
以下示例將說明 Tailwind CSS 網格列開始/結束類實用程式。
跨列擴充套件
col-span-* 實用程式指定元素在網格佈局中跨越的列數，如下所示。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Col Span Class Example
</h2>
<div class="grid grid-cols-4 gap-4">
<div class="bg-red-500 col-span-2 p-4">
Span 2 columns
</div>
<div class="bg-green-500 p-4">Column 1</div>
<div class="bg-green-400 p-4">Column 2</div>
<div class="bg-green-300 p-4">Column 3</div>
<div class="bg-green-200 p-4">Column 4</div>
<div class="bg-green-100 p-4">Column 5</div>
<div class="bg-green-500 p-4">Column 6</div>
</div>
</body>
</html>
使用列開始對齊元素
col-start-* 實用程式有效地定位網格專案，如下例所示。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Col Start Class Example
</h2>
<div class="grid grid-cols-4 gap-4">
<div class="bg-red-500 col-start-2 p-4">
Col start 2
</div>
<div class="bg-green-500 p-4">Column 1</div>
<div class="bg-green-400 p-4">Column 2</div>
<div class="bg-green-300 p-4">Column 3</div>
<div class="bg-green-200 p-4">Column 4</div>
<div class="bg-green-100 p-4">Column 5</div>
<div class="bg-green-500 p-4">Column 6</div>
</div>
</body>
</html>
使用列結束對齊元素
col-end-* 實用程式有效地定位網格專案，如下例所示。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Col End Class Example
</h2>
<div class="grid grid-cols-4 gap-4">
<div class="bg-red-500 col-start-2 col-end-4 p-4">End at column 4</div>
<div class="bg-green-500 p-4">Column 1</div>
<div class="bg-green-400 p-4">Column 2</div>
<div class="bg-green-300 p-4">Column 3</div>
<div class="bg-green-200 p-4">Column 4</div>
</div>
</body>
</html>
廣告