Jump to content
Gazley

UIKit3 Grid Spacing

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

Share this post


Link to post
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! :)

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By snobjorn
      I have been searching a while for pre-made UIkit 3 themes that I can download in some form and use. But I have not found much. I work with variables and compile most times, but sometimes I would prefer working with a "finished" theme as a starting point
      I have found the following resources:
      https://github.com/zzseba78/Kick-Off https://github.com/uikit/awesome-uikit Do anyone else know of UIkit 3 themes that you could list?
    • By flod
      Is there any chance to get stars and voting for comments in Uikit 3 “Regular” site/blog profile soon? Any working solution would be great.
×
×
  • Create New...