GridField Dynamic Column

This is the code i wrote 
my requirement is to

im fetching the data's from DB 

lets say i have 11 data in total ,

i need it in a dynamic column in gridField like (no of col can be : 2,4,6)

local!data : DB datas,

local!noOfCol : (3,4,5) -> any number (const),

so based on the col number the total number of data have to be grouped and run in the loop

in a gridField using GridColumn i need to run the loop 

the data should be look like this in the ICON wise.
it is done in Columns layout

but the UI should be like this 
i meant the above icons should come in the Grid Fields like below instead of the Pencil iocn




expample 

local!a : { {1,2,3,4} ,{5,6,7,8},{9,0}},

output in gridColumn in Left to Right

1 2 3 4

5 6 7 8

9 0 null null

Code 

a!localVariables(
local!data: rule!LH_QRC_getLookupDetailsByFilters(categoryList: "ICON"),
local!noOfCol: 4,
local!groupedData: a!forEach(
items: enumerate(
ceiling(count(local!data) / local!noOfCol)
),
expression: index(
local!data,
enumerate(4) + (((fv!index - 1) * 4) + 1),
null
)
),
a!gridField(
data: local!groupedData,
columns: a!forEach(
items: local!groupedData,
expression: a!gridColumn(
value: a!richTextDisplayField(
value: a!richTextItem(
text: fv!row['recordType!{3bb16dda-7da2-4cd8-98b9-03f91f7166f3}LH_R_Lookup_Details.fields.{26a951a2-97dd-460f-9861-e1023cfc2bdc}displayLabel']
)
)
)
),
spacing: "DENSE",
borderStyle: "STANDARD",
shadeAlternateRows: false
)
)

Can anyone help with the logic