In this tutorial, I’ll walk you through an implementation of the basic layout of a Trello board screen (see example here). This is a responsive, CSS-only solution, and only the structural features of the layout will be developed.
For a preview, here is a CodePen demo of the final result.
Besides Grid Layout and Flexbox, the solution employs calc and viewport units. To make the code more readable and efficient, I’ll also take advantage of Sass variables.
No fallbacks are provided, so make sure to run the code in a supporting browser. Without further ado, let’s dive in, developing the screen components one by one.
The Screen Layout
The screen of a Trello board consists of an app bar, a board bar, and a section containing the card lists. I’ll build this structure with the following markup skeleton:
[code language="html"]
<div class="ui">
<nav class="navbar app">...</nav>
<nav class="navbar board">...</nav>
<div class="lists">
<div class="list">
<header>...</header>
<ul>
<li>...</li>
...
<li>...</li>
</ul>
<footer>...</footer>
</div>
</div>
</div>
[/code]
This layout will be achieved with a CSS Grid. Specifically, a 3x1 grid (that is, one column and three rows). The first row will be for the app bar, the second for the board bar, and the third for the .lists element.
The first two rows each have a fixed height, while the third row will span the rest of the available viewport height:
[code language="sass"]
.ui {
height: 100vh;
display: grid;
grid-template-rows: $appbar-height $navbar-height 1fr;
}
[/code]
Viewport units ensure that the .ui container will always be as tall as the browser’s viewport.
A grid formatting context is assigned to the container, and the grid rows and columns specified above are defined. To be more precise, only the rows are defined because there is no need to declare the unique column. The sizing of the rows is done with a couple of Sass variables for the height of the bars and the fr unit to make the height of the .lists element span the rest of the available viewport height.
The Card Lists Section
As mentioned, the third row of the screen grid hosts the container for the card lists. Here’s the outline of its markup:
[code language="html"]
<div class="lists">
<div class="list">
...
</div>
...
<div class="list">
...
</div>
</div>
[/code]
I’m using a full viewport-width Flexbox single-line row container to format the lists:
[code language="sass"]
.lists {
display: flex;
overflow-x: auto;
> * {
flex: 0 0 auto; // 'rigid' lists
margin-left: $gap;
}
&::after {
content: '';
flex: 0 0 $gap;
}
}
[/code]
Assigning the auto value to the overflow-x property tells the browser to display a horizontal scrollbar at the bottom of the screen when the lists don’t fit in the width provided by the viewport.
Continue reading %Building a Trello Layout with CSS Grid and Flexbox%
by Giulio Mainardi via SitePoint
