如何使用 tailwind CSS 使网格项自动高度？

您可以使用 Tailwind CSS 中的 grid-template-columns 属性轻松地将 CSS 网格项设置为自动高度。

Tailwind 使用grid-col和grid-row属性来替代 CSS 中的 grid-template-columns 属性。 CSS 中的grid-template-columns属性用于设置网格的列数和列的大小。

此类在顺风 CSS 中接受多个值，所有属性都以类的形式涵盖。列数由赋予此类的值的数量设置。

网格模板列：

• grid-cols-1：每一行只让出一列。
• grid-cols-6：每行包含六列。
• grid-cols-12：每行包含 12 列。

句法：

 Contents... 

示例 1：

HTML

  

    

  

    

        GeeksforGeeks
    
      
    

        
GEEKSFORGEEKs
        
Courses
        

            

                
Data Structure
                
Competitive Programming
            
        
        

            Web Development
        
        

            Machine Learning
        
  
        

            

                
ReactJs
                
Angular
                
Vue
            
        
    

  

输出：

注意：从上面的输出中，您可以观察到每一行具有不同的高度，具体取决于特定行的网格所需的最大高度。

示例 2：

HTML

  

    

  

    

        GeeksforGeeks
    
      
    

        
1) ROW-1
        
2) ROW-1
        
3) ROW-1
        
1) ROW-2
        
1) ROW-2
        
1) ROW-2
        
1) ROW-3
        
2) ROW-3
        
3) ROW-3
    

  

输出：