Tailwind CSS 网格列开始/结束

这个类在 Tailwind CSS 中接受多个值，所有属性都以类的形式覆盖。它是 CSS 中 CSS grid-column 属性的替代品，用于描述允许使用 Tailwind CSS 设计网格结构和控制网格项目放置的属性数量。它可以改变网格项目的布局而不管它们的源顺序，这允许移动网格项目以满足这些不同的上下文，而无需修改底层标记。但是为了前端的快速开发。列数由赋予此类的值数设置。

网格列开始/结束：

• col-auto
• col-span-1
• col-span-2
• col-span-3
• col-span-4
• col-span-5
• col-span-6
• col-span-7
• col-span-8
• col-span-9
• col-span-10
• col-span-11
• col-span-12
• col-span-full
• col-start-1
• col-start-2
• col-start-3
• col-start-4
• col-start-5
• col-start-6
• col-start-7
• col-start-8
• col-start-9
• col-start-10
• col-start-11
• col-start-12
• col-start-13
• col-start-auto
• col-end-1
• col-end-2
• col-end-3
• col-end-4
• col-end-5
• col-end-6
• col-end-7
• col-end-8
• col-end-9
• col-end-10
• col-end-11
• col-end-12
• col-end-13
• 冷端自动

跨栏(col-span)：这个类会覆盖跨度区域，在这个类之后的记忆数字会保存一个跨度的面积，我们都知道有12个网格列或者你可以说12个网格跨度。

句法：

 Contents... 

类网格值：此类接受如上所述和如下所述的单个值：

• number：它保存网格列将采用的跨度数。

例子：

HTML

 
  
 
     
  
     
 
  
 
    

        GeeksforGeeks
    
 
  
    Tailwind CSS col-span Class 
  
    
 
        
1
 
        
2
 
        
3
 
        
4
 
        
5
 
        
6
 
    
 
 
  

输出：

开始和结束行(col-start|end)：这个类用于使元素在第 n 条网格线开始或结束。这些也可以与 col-span-number 实用程序结合使用以跨越特定数量的列。

注意：我们可以将此类与上述类(跨列(col-span))合并，下面的示例将让您了解如何使用它。

句法：

..

参数：该类接受如上所述和如下所述的单个参数：

• number：此参数定义网格列或普通列的开始或结束位置。

例子：

HTML

   
 
     
  
     
 
  
 
    

        GeeksforGeeks
    
 
  
    Tailwind CSS col-start|end Class 
  
    
 
        
1
 
        
2
 
        
3
 
        
4
 
        
5
 
        
6
 
        
7
 
        
8
    
 
 
  

输出：