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

二十五、Tailwind CSS基础学习笔记之 Tailwind CSS Grid Template Rows 设置网格布局的行数

温新 2022-09-18 23:04:48 Tailwind CSS 311人已围观

简介ailwind CSS基础学习笔记之 Tailwind CSS Grid Template Rows

hi,我是温新,一名PHPer


此笔记基于 Tailwind CSS v3.1.8

grid-rows 用于网格布局中指定行数。

ClassProperties
grid-rows-1grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-nonegrid-template-rows: none;

grid-rows-{number}

格式:<element class="grid grid-rows-{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 grid-rows</b>
   
   <!-- 指定 3 行 -->
   <div class="grid grid-rows-3 grid-flow-col">
       <div class="bg-green-500 rounded-lg m-4 h-12">1</div>
       <div class="bg-green-500 rounded-lg m-4 h-12">2</div>
       <div class="bg-green-500 rounded-lg m-4 h-12">3</div>
       <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
       <div class="bg-green-500 rounded-lg m-4 h-12">5</div>
       <div class="bg-green-500 rounded-lg m-4 h-12">6</div>
   </div>
   <!-- 指定 2 行 -->
   <div class="grid grid-rows-2 grid-flow-col">  
       <div class="bg-green-500 rounded-lg m-4 h-12">1</div>
       <div class="bg-green-500 rounded-lg m-4 h-12">2</div>
       <div class="bg-green-500 rounded-lg m-4 h-12">3</div>
       <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
       <div class="bg-green-500 rounded-lg m-4 h-12">5</div>
       <div class="bg-green-500 rounded-lg m-4 h-12">6</div>
   </div>
</body>
</html>


很赞哦!(2)

文章评论

登录 注册

自如初--时间轴

QQ登录

站名:自如初

独白:向前走!向前走!

邮箱:xyhcx@foxmail.com

站点信息