布尔玛 3 列瓷砖

在本文中，我们将看到 Bulma 3 Columns Tiles。 Bulma 框架使用 tile 元素在 Web 应用程序中构建 tile。在 Bulma 中，瓦片元素用于构建 2D 设计模式，您可能在 Pinterest 等各种网站中看到过。在 Bulma 中，我们可以创建 3 列瓦片，并且可以创建三列的网格结构。

Bulma 3 Columns Tiles 类：在 Bulma 中没有定义类来创建 4 列，我们需要简单地将 4 div 放在祖先类中。

语法：下面是 3 列图块的语法。

    

        

        ....
        
    
    


    

        

        ....
        
    
    


    

        

        ....
        
    
    

示例 1：下面的示例说明了 Bulma 3 Columns Tiles。

HTML

    
    
    
    


    

      
GeekforGeeks
      
Bulma 3 Column Tiles
      
      

        

          

            
Column One
 
 
            
Hola! Hi...
 
 
          
        
        

          

            
Column Two
 
 
            
What's up?
 
 
          
        
        

          

            
Column Three
 
 
            
How are you??
 
 
            

              

                Pleas tell me something about you and let's get
                to know each other.
              
 
 
            
          
        
      
 
      

        

          

            

              

                
Vertical Tiles
 
 
                
Connect
 
 
              
            
            

              

                
GeekforGeeks
 
 
                
Welcome Geek!
 
 
                

                  
                
              
            
          
          

            

              
Widest Column
 
 
              
Need help?
 
 
            
          
        
        

          

            

              
Tallest Column
 
 
              
Want to know something?
 
 
              

                 

                  You can learn anything you want.
                  You can learn how to code, about
                  coding competitions and so on.
                  You can learn how to solve problems,
                  about problems and so on. You can learn
                  how to be a good programmer, about programming
                  and so on. You can learn how to be a good programmer,
                  about programming and so on, etc.
                
 
 
                 

                  GFG also provides various courses on various topics.
                  Various internships are also available for students
                  like technical content writing, android development,
                  etc.
                
 
 
                 

                  GeekforGeeks is the best place to learn about coding,
                  competitive programming, problems, etc.
                
 
 
              
            
          
        
      
      

        

          

            
Side Left Column
 
 
            
You made it here.
 
 
            

               

                GFG has designed various programming courses including
                questions in order of difficulty and various other
                features.
              
 
 
            
          
        
        

          

            
Main Column
 
 
            
Hope you find it helpfull.
 
 
            

               

                CP means solving well-defined problems by
                writing programs below the specified limits.
                On GFG practice platform, you need to write
                code under many restrictions, like code execution
                time and memory limits for your program.
              
 
 
            
          
        
      
    

输出：

布尔玛 3 列瓷砖

示例 2： Bulma 3 Columns Tiles 的另一个示例。

HTML

    
    
    
    


  

    
GeekforGeeks
    
Bulma 3 Column Tiles
    
    

      

        

          
Coding 
 
 
          
Learn to code
 
 
        
      
      

        

          
Practice
 
 
          

            Level up your skills in coding
          
 
 
        
      
      

        

          
Web Tech
 
 
          

            HTML, CSS, JS
          
 
 
          

            

              Learn about web developement
              and other web frameworks
            
 
 
          
        
      
    
    

      

        

          

            

              
Tutorials
 
 
              

                Learn from Tutorials at GFG
              
 
 
            
          
          

            

              
GeekforGeeks
 
 
              
Welcome Geek!
 
 
              

                
              
            
          
        
        

          

            

              Participate in Coding Competitions
            
 
 
            

              C++, Java, DSA , etc
            
 
 
          
        
      
      

        

          

            

              Apply for Jobs
 
 
            

              Get Hired in your dream company
            
 
 
            

              

                Learn at GFG
              
 
 
              

                Apply for jobs at various companies
              
 
 
              

                Get Hired
              
 
 
            
          
        
      
    
  

输出：

布尔玛 3 列瓷砖

参考： https://bulma.io/documentation/layout/tiles/#3-columns