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