Jump to content

UI Kit - 3 columns layout


kongondo
 Share

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.

Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...