so it looks like you want to use some kind of “liquid card container” so that when a card isnt visible the rest bounces into place.
1- the easiest way to do this, is to create a layout container with conditional visibility for each user role.
2- the hard way to do this is with crazy sass.
put classes ap_cardcontainer and fluid4 on the listview
in the listview create a container with the class ap_card
and add this to your sass file (and combile your sass)
.mx-listview.ap_cardcontainer {
display: block;
width: 100%;
margin: 0;
padding: 0;
> ul {
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
> li{
display: contents;
> .mx-dataview{
display: contents;
> .mx-dataview-content{
display: contents;
}
}
}
}
& > ul > li {
.card, .ap_card{ // Fluid 4
width: calc(100% - 0px);
margin-right: 30px;
margin-bottom: 30px;
}
&:nth-child(1n) .card{
margin-right: 0;
}
}
&.fluid2 > ul > li {
.card, .ap_card{ // Fluid 4
width: calc(50% - 15px);
margin-right: 30px;
margin-bottom: 30px;
}
&:nth-child(2n) .card{
margin-right: 0;
}
}
&.fluid3 > ul > li {
.card, .ap_card{ // Fluid 4
width: calc(33.33% - 20px);
margin-right: 30px;
margin-bottom: 30px;
}
&:nth-child(3n) .card{
margin-right: 0;
}
}
&.fluid4 > ul > li {
.card, .ap_card{ // Fluid 4
width: calc(25% - 23px);
margin-right: 30px;
margin-bottom: 30px;
}
&:nth-child(4n) .ap_card{
margin-right: 0;
}
}
}