Jump to content
kongondo

UI Kit - 3 columns layout

Recommended Posts

Ok, so CSS is not my thing, but even by my (very low) standards, surely this ought to be rudimentary. I feel silly creating a whole thread for this but for the life of me, I'm unable to create a simple 3-column grid using ui-kit! The first and the third columns need to be 15% (or even 25%) in width each. The column in the middle should take the remainder. I've done the width thingy/class (ui-kit-width-blah-blah) , nesting 3 divs inside  a parent div but it just wont play ball. The 3rd child div is collapsing  to the next row. Please don't roll your eyes at me; I'm a noob :D. Help, anyone? Thanks.

Share this post


Link to post
Share on other sites
<div uk-grid>
	<div class="uk-width-1-6">
  	</div>
  	<div class="uk-width-expand">
  	</div>
  	<div class="uk-width-1-6">
  	</div>
</div>

1/6 is about as close to 15% you'll get I think. For 25% just use uk-width-1-4. 

  • Like 4

Share this post


Link to post
Share on other sites

And if you want to make it responsive:

<div uk-grid>
	<div class="uk-width-1-6@s">
  	</div>
  	<div class="uk-width-expand">
  	</div>
  	<div class="uk-width-1-6@s">
  	</div>
</div>

I find most of the time when the grid is not working it's because a div has not been closed somewhere or your parent grid is not setup correctly.  It's almost always a markup error somewhere.

  • Like 5

Share this post


Link to post
Share on other sites

Thx folks! I must have skimmed over the docs too quickly. I saw neither of 'expand' nor the '@' class :-).

  • Like 1

Share this post


Link to post
Share on other sites

IMHO the uikit docs are somewhat hard to read if you are not familiar with them. I've asked my design-partner a lot of such "dump" questions - everything was there, I just didn't see it as well 😉 They are more of a reference than docs. Listing all components and all options, but to know how everything plays together you need some experience and practise.

  • Like 4

Share this post


Link to post
Share on other sites

The docs are definitely tricky to read, and Uikit3 is actually still in RC stage (has been for years).  So every time you read them, there are tiny refinements and changes.

Yes, they dropped -10 classes and actually didn't have the -6 classes documented until recently, which made it seem that they had been dropped too.

  • Like 1

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...