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

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

Last Updated : 24 May, 2023

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

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

A

anuragsingh1022

Improve

Article Tags :

Similar Reads

How to Create a Masonry grid with flexbox in CSS?

Masonry Grid in CSS is a layout technique that arranges items in a way that resembles a masonry wall, where items of varying heights are placed in columns, filling in gaps and creating a staggered appearance. This can be done using Flexbox by allowing items to wrap and adjusting their heights to cre

How to Create a 2-Column Layout Grid with CSS?

Creating a two-column layout is a common design pattern used in web development. This layout helps to organize content efficiently and is used across various types of websites. A 2-column layout divides the webpage into two sections, which can be useful for creating sidebars, main content areas, or

How to Create a 4-Column Layout Grid with CSS?

We can create a layout with multiple columns using CSS. It is easier to design complex layouts. In this article, we are going to discuss how to create a 4-column layout grid using CSS. We will discuss different approaches, their syntax, and code examples of each method. A 4-column layout grid is a c

How to Create a 3-Column Layout Grid with CSS?

Grid in CSS is a powerful layout system that allows you to create complex, responsive designs with ease. By defining rows and columns, you can position elements precisely within a grid container. Using grid properties like grid-template-columns, you can create flexible and adaptive layouts, such as

How to Create a Responsive CSS Grid Layout ?

Here are different ways to create a responsive grid layout with CSS.1. Using auto-fill PropertyThis method can be used CSS Grid for a responsive layout. The grid-template-columns property adjusts columns based on space, keeping a minimum width of 200 pixels. Gaps between items are set with grid-gap.