Arguably, one of the best additions to CSS in a very long time is CSS Grid. If you have been a developer longer than a minute, there is a good chance you remember what the web was like before CSS Grid and even before Flexbox.
The most popular implementation of a kanban style layout is Trello. A lot of companies have replicated the easy, Kanban layout of Trello (including GitHub Projects).
This is the final layout you’ll be learning to build.
Inspecting the width of the columns in Trello, we know that each column has a width of 272px. The width of Trello’s columns are fixed and always 272px, so we do not need to make the width responsive. We also can see inspecting Trello’s markup and CSS that it has a gap of 8px between each main column.
.boards-container {
display: grid;
grid-auto-columns: 272px;
grid-auto-flow: column;
grid-gap: 8px;
height: 100vh;
overflow: auto;
}This CSS gives us a Trello style Kanban column layout. It gives us columns of 272px. We use grid-auto-columns to tell CSS Grid to automatically create new columns, this negates the need to specify the number of columns we want (because we can have infinite columns). Using grid-auto-flow tells our grid not to wrap and keep it as columns (expanding across the x-axis). Finally, we use overflow: auto to give us a scrollbar.
The HTML looks like this
<body>
<div class="boards-container">
<div class="boards-container__board"></div>
<div class="boards-container__board"></div>
<div class="boards-container__board"></div>
<div class="boards-container__board"></div>
</div>
</body>As you can see in our Codepen example, we have a Trello column layout perfectly spaced, with a scrollbar. It’s crazy to think how difficult stuff like this used to be a few years ago, now in a few lines of CSS, is easy.
Now, you’re probably wondering how we can get the cards inside of the columns to be like Trello’s layout. Well, turns out, the code needed for that is also only a few lines of CSS.
For each column of our board, we’ll create a grid and then tell it to create rows (instead of columns) that are as big as their content. We add in a grid gap (instead of margin), some padding and background colour for each column. We also add a border-radius of 3px because that’s what Trello does as well.
.boards-container__board {
background: #EBECF0;
border-radius: 3px;
display: grid;
grid-auto-rows: max-content;
grid-gap: 10px;
padding: 10px;
}Now, let’s do some quick styling for each of the cards. We add a background for each card, a box shadow, padding and border radius. We also need to style our heading by making it smaller and reducing the initial margin set on it by the browser.
.boards-container__board__card {
background: #FFF;
box-shadow: 0 1px 0 rgba(9,30,66,.25);
border-radius: 3px;
padding: 10px;
}
.boards-container__board h1 {
font-size: 16px;
margin: 0 0 12px 0;
}This provides us with a final Trello-esque Kanban layout driven by CSS Grid. It’s simple and effective.
I know CSS Grid seems intimidating and honestly, it is. But, for certain layouts, CSS Grid is the right tool for the right job and can make your life so much easier. Flex is still great and can be used alongside CSS Grid, but when it comes to layout, CSS Grid is the new king.
