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

二十四、Tailwind CSS基础学习笔记之 Tailwind CSS Grid Column Start / End

温新 2022-09-18 23:03:41 Tailwind CSS 224人已围观

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

hi,我是温新,一名PHPer


此笔记基于 Tailwind CSS v3.1.8

grid column strat/end 用于控制网格中列元素大小和跨列的功能。

ClassProperties
col-autogrid-column: auto;
col-span-1grid-column: span 1 / span 1;
col-span-2grid-column: span 2 / span 2;
col-span-3grid-column: span 3 / span 3;
col-span-4grid-column: span 4 / span 4;
col-span-5grid-column: span 5 / span 5;
col-span-6grid-column: span 6 / span 6;
col-span-7grid-column: span 7 / span 7;
col-span-8grid-column: span 8 / span 8;
col-span-9grid-column: span 9 / span 9;
col-span-10grid-column: span 10 / span 10;
col-span-11grid-column: span 11 / span 11;
col-span-12grid-column: span 12 / span 12;
col-span-fullgrid-column: 1 / -1;
col-start-1grid-column-start: 1;
col-start-2grid-column-start: 2;
col-start-3grid-column-start: 3;
col-start-4grid-column-start: 4;
col-start-5grid-column-start: 5;
col-start-6grid-column-start: 6;
col-start-7grid-column-start: 7;
col-start-8grid-column-start: 8;
col-start-9grid-column-start: 9;
col-start-10grid-column-start: 10;
col-start-11grid-column-start: 11;
col-start-12grid-column-start: 12;
col-start-13grid-column-start: 13;
col-start-autogrid-column-start: auto;
col-end-1grid-column-end: 1;
col-end-2grid-column-end: 2;
col-end-3grid-column-end: 3;
col-end-4grid-column-end: 4;
col-end-5grid-column-end: 5;
col-end-6grid-column-end: 6;
col-end-7grid-column-end: 7;
col-end-8grid-column-end: 8;
col-end-9grid-column-end: 9;
col-end-10grid-column-end: 10;
col-end-11grid-column-end: 11;
col-end-12grid-column-end: 12;
col-end-13grid-column-end: 13;
col-end-autogrid-column-end: auto;

col-span-{number}

格式:<element class="col-span-{number}"></element>

说明:网格扩列操作。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 col-span</b>
   

   <div class="grid grid-cols-3 gap-1 justify-evenly m-8">
       <div class="bg-green-700 rounded-lg h-12">1</div>
       <div class="bg-yellow-700 rounded-lg h-12">2</div>
       <div class="bg-pink-700 rounded-lg h-12">3</div>

       <div class="bg-green-300 col-span-2 rounded-lg h-12">1</div>
       <div class="bg-pink-200 rounded-lg h-12">1</div>
       <div class="bg-blue-700 col-span-3 rounded-lg h-12">1</div>
   </div>

   <!---
       此案例中,每行显示 3 个元素:
       col-span-2,使用该的元素,表示我在这一行中,占2个元素的位置
       col-span-3, 独占该位置
   -->
</body>
</html>

col-start|end-{number}

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

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

<!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 col-start|end</b>
   
   <div class="grid grid-cols-4 gap-1 justify-evenly">
       <div class="bg-green-500 h-12 rounded-lg">1</div>
       <div class="bg-green-500 h-12 rounded-lg">2</div>
       <div class="bg-pink-500 h-12 rounded-lg col-start-2 col-end-4 ">3</div>
       <div class="bg-green-500 h-12 rounded-lg">4</div>
       <div class="bg-green-500 h-12 rounded-lg">5</div>
       <div class="bg-green-500 h-12 rounded-lg">6</div>
       <div class="bg-green-500 h-12 rounded-lg">7</div>
       <div class="bg-blue-500 h-12 rounded-lg col-start-2 col-span-3">8</div>
   </div>
</body>
</html>



很赞哦!(2)

文章评论

登录 注册

自如初--时间轴

QQ登录

站名:自如初

独白:向前走!向前走!

邮箱:xyhcx@foxmail.com

站点信息