您现在的位置是:自如初>Tailwind CSSTailwind CSS

二十六、Tailwind CSS基础学习笔记之 Tailwind CSS Grid Row Start / End 设置元素跨行

温新 2022-09-18 23:05:53 Tailwind CSS 240人已围观

简介Tailwind CSS基础学习笔记之 Tailwind CSS Grid Row Start / End

hi,我是温新,一名PHPer


此笔记基于 Tailwind CSS v3.1.8

grid row start / end 用于设置元素跨行。

row-span-{number}

格式:<element class="row-span-{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 row-span</b>
 
   <!-- 设置元素跨行 -->
   <div class="grid grid-rows-3 grid-flow-col gap-1">
       <div class="bg-green-300 rounded-lg">1</div>
       <div class="bg-green-300 rounded-lg">2</div>
       <div class="bg-green-300 rounded-lg">3</div>
       <div class="bg-green-500 rounded-lg  row-span-2">4</div>
       <div class="bg-green-300 rounded-lg">5</div>
       <div class="bg-green-500 rounded-lg row-span-3">6</div>  
   </div>
</body>
</html>

row-start|end

格式:<element class="row-start|end-{number}"></element>

说明:使用 row-start-{number}row-end-{number} 功能类,使元素以第 n 条网格线为起点或终点。这些功能类也可以与 row-span-{number} 功能类结合使用,来跨越特定数量的行。

<!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 row-start|end</b>
   
   <div class="grid grid-rows-3 grid-flow-col gap-1">
       <div class="bg-green-500 row-start-2 row-span-2
                   rounded-lg">1</div>
       <div class="bg-green-300 rounded-lg">2</div>
       <div class="bg-green-300 rounded-lg">3</div>
       <div class="bg-green-500 row-start-2 col-end-4
                   rounded-lg">4</div>
       <div class="bg-green-300 rounded-lg">5</div>
       <div class="bg-green-300 rounded-lg">6</div>
       <div class="bg-green-300 rounded-lg">7</div>
       <div class="bg-green-500 row-start-2 row-span-3
                   rounded-lg">8</div>  
   </div>
</body>
</html>


很赞哦!(2)

文章评论

登录 注册

自如初--时间轴

QQ登录

站名:自如初

独白:向前走!向前走!

邮箱:xyhcx@foxmail.com

站点信息