Jump to content

UIKit3 Grid Spacing


Gazley
 Share

Recommended Posts

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! :)

Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

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.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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...

}

 

  • Thanks 1
Link to comment
Share on other sites

 Share

×
×
  • Create New...