I’ve tried putting them in a 3-5, 2-5 custom grid but that didn’t work. Note that I don’t want the bottom two to fill the width but keep their widths the same as the top 3. Any ideas if I can do this responsively without the old hide and show messing about?
Thanks
p.s. Ideally I’d like to achieve this with just UIKit stacks if possible?
This is indeed an interest task that can be useful for others as well.
For this kind or layout use the Grid in custom mode so to have more control of how your columns will behave related to the various widths. Here’s a step by step guide:
Set the Grid to Custom Columns
Add 5 columns of Width 1-3 to the Grid
On the first three Widths open the custom class and use: uk-width-1-5@m
On the remaining two Widths use: uk-width-1-2@s uk-width-1-5@m
Lastly add the following class to the Grid: uk-flex-center
What you are trying to achieve is that all columns will have 1/5 of the container width on a medium device width, while just the last two will have 1/2 of the container width on small device width. The flex class on the Grid will centre everything.
Also if you keep the Enable breakpoints of the Width’s on Small option all columns will expand to 100% on small device widths.
Note that you can still play with all responsive width classes depending on the layout that you wish to achieve. Check the official docs on device width and responsive classes: https://getuikit.com/docs/width#responsive-width
Wow! Thanks @Lucas that’s really interesting and educational! I’d never have worked that out on my own. Thanks for the link too. I’m going to read the whole site when I get a moment (or two) and learn as much as my old brain can fit in!
That is very handy! I hadn’t pushed the Grid stack to this level before. I’ve added this example to the columns page on the Skyline demo project, scroll to the bottom: https://www.uikitter.com/demos/skyline/columns/
