您现在的位置是:自如初>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 用于设置行和列之间的距离。包含xy 轴在内,该类共有 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)

文章评论

登录 注册

自如初--时间轴

站名:自如初

独白:向前走!向前走!

邮箱:ziruchu@qq.com

RSS: RSS

站点信息