DataGrid: Is grid-layout with 4-2-1 columns possible?

[RueKow]

I have a responsive DataGrid with 4 columns. It depends on screen width (approximately 640px) when DataGrid is switching from 4 to 1 column. My intention is, depending on screen width, first to switch from 4 to 2 columns and then from 2 to 1 column.

Is that possible with DataGrid?
Can I change CSS by using media queries?
Is it possible to integrate a data list to Grid CSS?

[liamhenry21]

A total of nine buttons, each placed in his own cell in a grid containing three rows and three columns. Again we use a star-based system on a wide scale, but this time we customize the number too - the first row and the first column have a width of 2 *, which basically means that it uses twice as much space as rows and columns with 1 * - himself).

[RueKow]

Changing dataGrid style classes with media queries makes it working as requested.

Code: Select all

.ui-grid-row {
	display: flex;
	flex-wrap: wrap;
}

Code: Select all

@media screen and (max-width: 640px) {
	.ui-datagrid-column {
		width: 100% !important;
	}
}
@media screen and (min-width: 641px) and (max-width: 1024px) {
	.ui-datagrid-column {
		width: 50% !important;
	}
}
@media screen and (min-width: 1025px) {
	.ui-datagrid-column {
		width: 25% !important;
	}
}