Skip to content
Related Articles

Related Articles

Improve Article

How to create a Trello Layout with CSS Grid and Flexbox ?

  • Last Updated : 14 Jul, 2021

Trello layout is used to organize or manage information in stages. It can be created using CSS Grid and Flexbox. Let’s create the layout as shown in the below image. In the image, Trello Layout consists of Trello List which holds the items or information in it.

Layout Structure:

Trello layout

HTML Code snippet: To understand the Trello layout, let us first create a single Trello layout with a single list item in it.

HTML




<body>
    <div class="trello">
        <div class="trello__list">
            <span style="font-size:large; margin-left:5px">Title</span>
            <div class="trello__list__item">
               <span>CSS is so good.</span
               <span class="highlighted">CSS</span>
            </div>
        </div>
    </div>
</body>

 



Output:

HTML Code snippet: In the following, adding more items to the layout as shown in the output

HTML




<body>
    <div class="trello">
        <div class="trello__list">
            <span style="font-size:large; margin-left:5px">Title</span>
            <div class="trello__list__item">
               <span>CSS is so good.</span
               <span class="highlighted">CSS</span>
            </div>
            <div class="trello__list__item">
                <span>GFG is great site to learn new things.</span
                <span class="highlighted">GFG</span>
             </div>
        </div>
    </div>
</body>

Output:

double 

Final code: The following code shows the full Trello-like layout structure.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
     
    <style>
        body{
            background-color: #31e768;
            display: flexbox;
            font-size:large ;
              
        }
        .trello{
            display: grid;
            background: #1db64b;
            grid-template-rows: 1fr;
            grid-template-columns: repeat(auto-fit,250px);
            grid-gap: 12px;
        }
        .trello__list{
            background-color: #d6d5d5;
            border-radius: 3px;
            align-self: start;
        }
        .trello__list__item{
            background-color: white;
            background: white;
            display: grid;
            border-radius: 5px;
            margin: 7px;
            padding: 2px;
        }
        .highlighted{
            background-color: rgb(102, 192, 102);
            width: 30px;
            color: white;
            border-radius: 4px;
            padding: 2px;
            font-size: small;
            margin-top: 2px;
        }
  
    </style>
</head>
<body>
    <div class="trello">
        <div class="trello__list">
            <span style="font-size:large; margin-left:5px">
              Title</span>
            <div class="trello__list__item">
               <span>CSS is so good.</span
               <span class="highlighted">CSS</span>
            </div>
            <div class="trello__list__item">
                <span>GFG is great site to learn new things.</span
                <span class="highlighted">GFG</span>
             </div>
             <div class="trello__list__item">
                <span>I like to write code in HTML,CSS.</span
             </div>
        </div>
        <div class="trello__list">
            <span style="font-size:large; margin-left:5px">
              Title</span>
            <div class="trello__list__item">
               <span>Today is a sunny day, birds are chirping and
                 trees are dancing  with wind.</span
            </div>
            <div class="trello__list__item">
                <span>Learning new things is so cool.</span
             </div>
             <div class="trello__list__item">
                <span>Taj Mahal is located in Agra, Uttar Pradesh. 
                  It was built in 1631. </span
             </div>
             <div class="trello__list__item">
                <span>
                  Planets- Mercury, Venus, Earth, Mars, Jupiter, Saturn,
                  Uranus, Neptune and all planets revolves around the sun 
                  in our solar system.
                </span
             </div>
        </div>
    </div>
</body>
</html>

Output:

trello output

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :