UI Kit - 3 columns layout

[kongondo]

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.

[Tom.]

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

[mciccone]

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.

[kongondo]

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

[bernhard]

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.

[pwired]

It seems that UIKit 3 has dropped uk-width-*-10 classes

Something to elaborate

https://github.com/uikit/uikit/issues/2250
https://github.com/uikit/uikit/issues/217

 

 

[mciccone]

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.