Grid display - vertical align tasks at the bottom of the grid cell one above another

I am currently implementing a calendar. I have used the grid layout for displaying the calendar day cells. I want to display some tasks/notes of different types as strips in some grid cells. The tasks should be vertically aligned in the bottom border of the cell without affecting the display of calendar day cell. The width of the task strips should fit(touch both the left and right border of the cell) the cell width(100%). If there are more than one task in a day cell(for example, May 26), it should be aligned one above another with a 2px gap between them.

The sample code is here.
jsFiddle
Can you help to achieve the expected design?

Hey,

*{ box-sizing: border-box}
.day { padding: 16px 0px;	}
.task{ margin-top:2px;}

is this what you re trying to achieve?

upd: Oops it should be at the bottom of the cell too…
generally for a cell you could do something like this

display: flex;  
flex-direction:column;

This is the part which helped me to arrange the text at the bottom of the cell.

Thank you for the solution.

1 Like