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

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

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

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

hi，我是温新，一名PHPer

此笔记基于 Tailwind CSS v3.1.8

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

Class	Properties
auto-rows-auto	grid-auto-rows: auto;
auto-rows-min	grid-auto-rows: min-content;
auto-rows-max	grid-auto-rows: max-content;
auto-rows-fr	grid-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>