Try wrapping the columns in a container and make sure that container gets "display: flex" as styling. You can put that in the "style" area in the appearance tab to check if it works. Since this is against best practices, you should create a class for it in your scss files like Bootstrap 4 does (Mendix is still on 3):
.d-flex {
display: flex;
}
And then put "d-flex" class on the container. More about flexbox here.
Thanks for the help, but that didn't worked for me, my columns remained fitting their heights to their content individually.
What I did at the end was, in a separate .scss partial file, I created a class for the container that contains the template grid, see all the classes nested and apply a fixed height value and an overflow auto at the class named mx-dataview, at least in that way the columns will always have a fixed height, and if one of them needs to be higher then you can scroll through it.
.some-custom-name-for-the-container { /* Custom name for the container */
.mx-templategrid-row {
.mx-templategrid-item{
.mx-dataview {
height: 500px; /* This height depends on you */
overflow: auto;
.mx-dataview-content{
}
}
}
}
}
Flexbox is not the right solution as it is not aware of other dimensions when aligning content.
In your case you can use the old style table or a css grid. For more information on the latter check the blog post
https://www.notion.so/gajduk/The-road-to-responsive-tables-in-Mendix-f8a1de4595634167bd489c48b565fbe1