Creating Grid-like Table Records

  
Hello everyone! I would like to ask for help. I am trying to replicate the grid-based show records style just like the image layout below. Is this kind of layout achievable by using the Table Records widget? If so, how will I be able to do this? 
Hello Ju-Chan,

I advise you to use a list records and some CSS "magic". BE carefull about the "Line Separator" propertie that is "new line" be default.

That can mess you for some time...
Pedro Cardoso wrote:
Hello Ju-Chan,

I advise you to use a list records and some CSS "magic". BE carefull about the "Line Separator" propertie that is "new line" be default.

That can mess you for some time...
 I'll give it a try! Thanks Pedro. I'll notify when problems arise. 
 
Hi All,

This is to revive the following post. I am still wondering how can I achieve the following layout above with my List Records. Here's my output using my personal cloud, since I'm trying out Cards feature in OutSystems.



It only rendered 4 comments but it repeated. I like to achieve that in every card, only one comment is represented.

Hope you can help me with this. I think to help you guys more, I've attached my OML file in this post.

Regards,

Ju-chan
Ju-chan wrote:
Hi All,

This is to revive the following post. I am still wondering how can I achieve the following layout above with my List Records. Here's my output using my personal cloud, since I'm trying out Cards feature in OutSystems.



It only rendered 4 comments but it repeated. I like to achieve that in every card, only one comment is represented.

Hope you can help me with this. I think to help you guys more, I've attached my OML file in this post.

Regards,

Ju-chan
Apologies, but I found the solution to the issue by tweaking other website's CSS.

It is really a CSS Magic :))

To share my solution, here's a CSS code for you to refer.

.ListGrid_Row{
    display: table-row;
    margin: 0px;
}

.ListGrid_Row Cell{
    display: table-cell;
    margin: 20px;
    width: 50%;
    padding: 28px;
}

div.CardWhite{
    margin-right: 20px;   
    margin-bottom: 20px;
}