Sizing grids

[tbettinazzi@axioma.it]

I’ve a grid I want to occupy all the available space.

I used
smart-grid {
width: 100%;
height: auto
}
and it works (also setting width: auto).

In the grid I’ve many columns (but I don’t know how many, a priori) some of them (3 in fact) occupies defined space (say 10%) the others should divide the remaining space.

How can I do that ?

Tks

• This topic was modified 2 weeks, 6 days ago by tbettinazzi@axioma.it.
• This topic was modified 2 weeks, 6 days ago by tbettinazzi@axioma.it.

[Markov]

Hi,

Smart UI allows defining each column’s width explicitly. You can mix:

%-based widths (relative to grid width)
auto (for content-based sizing)
Leave width undefined → grid will auto-distribute

Since you don’t know the total number of dynamic columns, use logic in JavaScript/TypeScript to calculate the remaining width and apply it evenly to the dynamic columns.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[phale]

“@tbettinazzi@axioma I’ve handled similar cases by setting fixed widths for the known columns and then using <code data-start=”169″ data-end=”180″>flex-grow in CSS for the dynamic ones so they share leftover space. Or like Markov said, calculate the widths in JS and assign them. Depends how precise you need it. Good luck!”

[tbettinazzi@axioma.it]

@phale How did You apply flex-grow to columns.

I didn’t find any way to apply classes to columns.

Tks

[Author]

Posts