UIkit Grid not as expected

623 Views Asked by At

I need to create a UIKit grid like this:

UIKIK GRID

This is my code:

<div className="uk-grid uk-grid-collapse">
    <div className="uk-width-5-8">
        <div className="uk-grid">
            <div className="uk-width-1-2">.Variable..</div>
            <div className="uk-width-1-2">..Modelo.</div>
            <div className="uk-width-1-2">..Mes.</div>
            <div className="uk-width-1-2">..Escenario.</div>
        </div>
    </div>
    <div className="uk-width-1-8">BUSCAR</div>
    <div className="uk-width-2-8">RANGE</div>
</div>

I've followed the example on https://getuikit.com/docs/grid.html (Nested Grid) but I can't get it, this is what I got:

enter image description here

Any tip? Could be fault of another css? I'm using an html template based on UIkit.

UPDATE: When I remove this width I got what I need:

enter image description here

But I can't edit that source, there must be another way to do it. Adding width inline won't work.

1

There are 1 best solutions below

1
On BEST ANSWER

Excuse me, but please remove className from your html, use class instead;) And it seems that theres no 5-8ths in grid docs neither in src folder(have looked, but couldn't find)