UIKit3 Grid Spacing

[Gazley]

Hi there,

Just started with UIKit3. When marking up a grid, the gutter defaults to medium. If I add uk-child-width-1-3, my items wrap nicely but, whilst they are separated by the gutter, they sit on top of each other without gutter/margin in the vertical.

What is the best approach to have equal space both horizontally and vertically with a grid's child items.

Also, what is the best approach to reducing that space at smaller breakpoints?

Many thanks!

[3fingers]

Hi Gazley,

taka a look at this pen I quickly made:

https://codepen.io/anon/pen/PJKogG

Unfortunately I didn't find an "out of the box" way to set a responsive gutter inside of the grid, you should have to implement yourself I suppose.

[Gazley]

@3fingers - awesome! Thanks for the heads-up. So simple when you know how!

[mciccone]

I may not be understanding correctly, but you can also apply uk-grid-margin class to the parent grid div, and that will apply margin between rows automatically when they wrap:

https://getuikit.com/docs/grid#component-options

[Gazley]

Hi @mciccone - I saw that myself but, I couldn't get it to work at all. After your suggestion, I just tried it again and still, no joy. Dunno <shrug>

If you have been able to make that work, I'd be interested to see the markup. For now, @3fingers approach works fine but, I just wondered whether there is a "definitive" approach to this recommended by UIKit or, whether it's one of those cases where there is just more than one way to "skin a cat", so to speak!

Thanks for the heads-up!

[Peter Knight]

18 hours ago, Gazley said:

Hi @mciccone - I saw that myself but, I couldn't get it to work at all. After your suggestion, I just tried it again and still, no joy. Dunno <shrug>

If you have been able to make that work, I'd be interested to see the markup. For now, @3fingers approach works fine but, I just wondered whether there is a "definitive" approach to this recommended by UIKit or, whether it's one of those cases where there is just more than one way to "skin a cat", so to speak!

Thanks for the heads-up!

Can you drop your own sample into a CodePen or similar? Anytime I've had margin or padding issues with UI kit it's because I was missing a uk-grid or had my own CSS interfering with the flow.

[3fingers]

Another "solution" could  be using hooks (more on that here):

/*
media queries variables like "breakpoint-small" are found inside variables.scss
hook for margin is found inside "margin.scss"
*/

@mixin hook-margin-misc()
{
    @media (max-width: $breakpoint-small) {  
        .uk-margin-top {    // or ".uk-margin-bottom"
            margin: 10px 0 0 0; // or whatever you prefer
    }
     @media (max-width: $breakpoint-medium) {  
        .uk-margin-top {    
            margin: 0 !important;    
    }
    
    // and so on...

}