您现在的位置是:自如初>Tailwind CSSTailwind CSS
三十、Tailwind CSS基础学习笔记之 Tailwind CSS Grid Gap
温新
2022-10-08 22:07:02
【Tailwind CSS】
808人已围观
简介Tailwind CSS基础学习笔记之 Tailwind CSS Grid Gap
hi,我是温新,一名PHPer
此笔记基于 Tailwind CSS v3.1.8
gap
用于设置行和列之间的距离。包含x
和 y
轴在内,该类共有 105 个。
gap-{number}
格式:<element class="gap-{number}"></element>
说明:设置行列之间的间距
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="../../dist/mystyle.css" rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-500 text-5xl font-bold">Tailwind CSS Grid</h1>
<b>Tailwind CSS gap </b>
<div class="grid grid-rows-2 grid-flow-col gap-10">
<div class="bg-green-300 rounded-lg h-12 m-4">1</div>
<div class="bg-green-300 rounded-lg h-12 m-4">2</div>
<div class="bg-green-300 rounded-lg h-12 m-4">3</div>
<div class="bg-green-300 rounded-lg h-12 m-4">4</div>
<div class="bg-green-300 rounded-lg h-12 m-4">5</div>
<div class="bg-green-300 rounded-lg h-12 m-4">6</div>
</div>
</body>
</html>
gap-x-{number}
格式:<element class="gap-x-{number}"></element>
说明:设置每行在 x 轴的距离
gap-y-{number}
格式:<element class="gap-y-{number}"></element>
说明:设置每行在 y 轴的距离
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="../../dist/mystyle.css" rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-500 text-5xl font-bold">Tailwind CSS Grid</h1>
<b>Tailwind CSS gap </b>
<div class="grid grid-rows-2 grid-flow-col gap-x-10">
<div class="bg-green-300 rounded-lg h-12 m-4">1</div>
<div class="bg-green-300 rounded-lg h-12 m-4">2</div>
<div class="bg-green-300 rounded-lg h-12 m-4">3</div>
<div class="bg-green-300 rounded-lg h-12 m-4">4</div>
<div class="bg-green-300 rounded-lg h-12 m-4">5</div>
<div class="bg-green-300 rounded-lg h-12 m-4">6</div>
</div>
<div class="grid grid-rows-2 grid-flow-col gap-y-10">
<div class="bg-green-300 rounded-lg h-12 m-4">1</div>
<div class="bg-green-300 rounded-lg h-12 m-4">2</div>
<div class="bg-green-300 rounded-lg h-12 m-4">3</div>
<div class="bg-green-300 rounded-lg h-12 m-4">4</div>
<div class="bg-green-300 rounded-lg h-12 m-4">5</div>
<div class="bg-green-300 rounded-lg h-12 m-4">6</div>
</div>
</body>
</html>
很赞哦!(1)
相关文章
- 三十八、Tailwind CSS基础学习笔记之 Tailwind CSS Place Self
- 三十七、Tailwind CSS基础学习笔记之 Tailwind CSS Place Items
- 三十六、Tailwind CSS基础学习笔记之 Tailwind CSS Place Content
- 三十五、Tailwind CSS基础学习笔记之 Tailwind CSS Align Self
- 三十四、Tailwind CSS基础学习笔记之 Tailwind CSS Align Content
- 三十三、Tailwind CSS基础学习笔记之 Tailwind CSS Justify Self
- 三十二、Tailwind CSS基础学习笔记之 Tailwind CSS Justify Items
- 三十一、Tailwind CSS基础学习笔记之 Tailwind CSS Justify Content
- 三十、Tailwind CSS基础学习笔记之 Tailwind CSS Grid Gap
- 二十九、Tailwind CSS基础学习笔记之 Tailwind CSS Grid Auto Rows