Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

HTML Code snippet: 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>
      Trello Layout
    </title>
</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>
    </div>
</body>
</html>


Output:

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

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Trello Layout</title>
</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>
    </div>
</body>
</html>


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



Last Updated : 24 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads