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

二十九、Tailwind CSS基础学习笔记之 Tailwind CSS Grid Auto Rows

温新 2022-09-18 23:12:20 Tailwind CSS 256人已围观

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

hi,我是温新,一名PHPer


此笔记基于 Tailwind CSS v3.1.8

grid auto rows 用于指定隐式生成的网格容器的行的大小。

ClassProperties
auto-rows-autogrid-auto-rows: auto;
auto-rows-mingrid-auto-rows: min-content;
auto-rows-maxgrid-auto-rows: max-content;
auto-rows-frgrid-auto-rows: minmax(0, 1fr);

auto-rows-auto

格式:<element></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-auto-rows </b>

   <div class="bg-green-500 m-8 p-8 grid grid-rows-2 grid-flow-col gap-4 auto-rows-auto">
       <div class="bg-pink-500 P-4">Tailwind CSS</div>
       <div class="bg-blue-500 P-4">Tailwind CSS</div>
       <div class="bg-red-500 P-4">Tailwind CSS</div>
       <div class="bg-yellow-500 P-4">Tailwind CSS</div>
   </div>
</body>
</html>

该类根据元素内容的大小来自动调整该列的适应。

auto-rows-min

格式:<element></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-auto-rows </b>
   <div class="bg-green-500 m-8 p-8 grid grid-rows-2 grid-flow-col gap-4 auto-rows-min">
       <div class="bg-pink-500 P-4">1、Tailwind CSS PHP</div>
       <div class="bg-blue-500 P-4">2、Tailwind</div>
       <div class="bg-red-500 P-4">3、CSS</div>
       <div class="bg-yellow-500 P-4">4、Hello Word</div>
       <div class="bg-orange-500 P-4">5、Hello Word</div>
       <div class="bg-orange-900 P-4">6、Hello Word</div>
   </div>
</body>
</html>


很赞哦!(2)

文章评论

登录 注册

自如初--时间轴

QQ登录

站名:自如初

独白:向前走!向前走!

邮箱:xyhcx@foxmail.com

站点信息