Is there any easy way I can set a certain value for the number of columns of a grid for the desktop viewport size and another one, for example, for tablets viewport size? If not, would a pull request be welcome to implement such a feature? I find it something very important for certain layouts.
A practical example of what I mean (just to give the idea):
<EuiFlexGrid columns={{
tablet: 3,
desktop: 4
}}>
...
</EuiFlexGrid>
An idea could even be to have a helper to facilitate these operations, hence a function that extracts the values from $euiBreakpoints from SASS and compares the current viewport size against the breakpoints, returning the current one. This way the code would look something like this:
<EuiFlexGrid
columns={
getBreakpoint() === "m" ? 3 : getBreakpoint() === "l" ? 4 : 3
}
>
...
</EuiFlexGrid>
Is there any easy way I can set a certain value for the number of columns of a grid for the desktop viewport size and another one, for example, for tablets viewport size? If not, would a pull request be welcome to implement such a feature? I find it something very important for certain layouts.
A practical example of what I mean (just to give the idea):
An idea could even be to have a helper to facilitate these operations, hence a function that extracts the values from
$euiBreakpointsfrom SASS and compares the current viewport size against the breakpoints, returning the current one. This way the code would look something like this: