Design a responsive trello board with modern CSS grid

We have explained different CSS grid responsive layouts before. But as a specific example we will learn about a responsive trello card layout borrowing from this thorough article about grids from CSS tricks.

Card layout trello as a common use case

Basically it is one of the best use cases of CSS grid. Designing a responsive column based layout which is mostly known as card layouts calling each column a card. Lets see the pen:

The main grid setup

Practically the main grid container specifies how we lay down the layout. We could find the code here:

.column__list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   grid-gap: .5rem;
   align-items: flex-start;

Using auto-fill in the repeat function we make sure that we achieve a fluid layout that each empty grid cell will be populated by a column once there is enough space for it. Therefore the minmax() function defines the minimum and maximum size of each grid cell to be calculated and occupied.

The original layout in trello site is not responsive. We can even achieve that by adding these two lines:

grid-auto-flow: column;
grid-auto-columns: minmax(260px, 1fr);

Originally the default flow of the grid is based on rows. If we change it to column, then we get a scrollbar in our grid as we expand the width of the container by resizing it. And adding grid-auto-columns we define the size of auto-generated columns in this case. Here these two lines are not in use though.

Design each main card

Practically each main column or card is based on grid themselves:

.card__list {
   display: grid;
   grid-template-rows: auto;
   grid-gap: .5rem;
   margin: .5rem 0;

What matters is grid-template-rows set to auto. Because we need rows to have flexible heights based in their content.

Also inner columns of each card use grid as well. Therefore the design looks smooth and consistent throughout the layout.

Using just a few lines of code in CSS grid using auto-fill or auto-fit and minmax() function is absolutely enough to design a beautiful responsive layout that works on every size with no need to media queries.

Thank you for reading.

© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.