如何使用 CSS Grid 和 Flexbox 创建 Trello 布局？

Trello 布局用于分阶段组织或管理信息。它可以使用CSS Grid和Flexbox创建。让我们创建如下图所示的布局。在图像中，Trello Layout 由 Trello List 组成，其中包含项目或信息。

布局结构：

Trello 布局

HTML 代码片段：要了解 Trello 布局，让我们首先创建一个包含单个列表项的单个 Trello 布局。

HTML

    

        

            Title
            

               CSS is so good. 
               CSS
            
        
    

输出：

HTML 代码片段：在下面，向布局添加更多项目，如输出所示

HTML

    

        

            Title
            

               CSS is so good. 
               CSS
            
            

                GFG is great site to learn new things. 
                GFG
             
        
    

输出：

双倍的

最终代码：以下代码显示了完整的类似 Trello 的布局结构。

HTML

     
    


    

        

            
              Title
            

               CSS is so good. 
               CSS
            
            

                GFG is great site to learn new things. 
                GFG
             
             

                I like to write code in HTML,CSS. 
             
        
        

            
              Title
            

               Today is a sunny day, birds are chirping and
                 trees are dancing  with wind. 
            
            

                Learning new things is so cool. 
             
             

                Taj Mahal is located in Agra, Uttar Pradesh. 
                  It was built in 1631.  
             
             

                
                  Planets- Mercury, Venus, Earth, Mars, Jupiter, Saturn,
                  Uranus, Neptune and all planets revolves around the sun 
                  in our solar system.
                 
             
        
    

输出：

trello 输出