Hi
I am using a SfGrid in Syncfusion Blazor 26.x. I want to display results horizontally, rather than vertically. So as the page is resized it will take up the width of screen and put the next result to the right. I thought a simple float:left or display:flex would have done it but it didnt. I think its because it uses a table. I wanted to use the SfGrid so I can keep all the paging, sorting, filtering etc...
my CSS is
.VehicleGridClass {
display: flex !important; /* Ensure flexbox is applied */
flex-wrap: wrap !important; /* Ensure wrapping */
gap: 16px;
justify-content: flex-start;
border: 2px dashed blue; /* To visualize the grid container */
width: 100%;
}
.VehicleGridItem {
display: inline-block !important;
width: 450px !important;
max-width: 450px !important;
box-sizing: border-box;
border: 2px solid red; /* To visualize each item */
}
My SfGrid is:
<div class="VehicleGridClass">
<SfGrid @ref="@DataGrid" DataSource="@GridData" TValue="VehicleModel" ID="Grid1">
<GridColumns>
<GridColumn >
<Template>
@{
var data = (context as VehicleModel);
<div class="VehicleGridItem" >
@data?.ftp_plate
</div>
}
</Template>
</GridColumn>
</GridColumns>
</SfGrid>
</div>
