Example

Based on a 12 columns grid system

.kl-9

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quis inventore esse veritatis consectetur, rem nesciunt error molestias, dolore, illo facilis. Est esse molestiae soluta quidem, unde velit aperiam architecto? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus est laudantium dolores sunt a recusandae dignissimos unde odit doloremque fugiat commodi at, ducimus quas. A ipsa cum, corporis laudantium ipsum?

Parent .row with base--16 is nested in .kl-9, in .container .row of base--12, Magic !

.kl-7

I'm nested !

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur eveniet corrupti blanditiis enim, a ipsum.

.kl-4

Me too !

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur eveniet corrupti blanditiis enim, a ipsum.

.kl-5

Really ?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur eveniet corrupti blanditiis enim, a ipsum.

.kl-3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sit exercitationem ab velit, quidem voluptates asperiores veritatis, facilis officia, rem, quas amet iste nostrum aperiam placeat dicta omnis temporibus explicabo!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima fugiat perspiciatis rerum itaque culpa magnam iure ex ut, accusantium?

Parent .row is base--10, grand parent .container is still base--12 !

.kl-4

Which means that, if you don't define a base class in a .row, the columns you'll use will have a base of the closest parent .base--*

.kl-1

Iste.

.kl-1

Veniam?

.kl-2

Repudi.

.kl-1

Esse.

.kl-1

Animi!

Parent .row is base--16, grand parent is still base--12

.kl-11

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae odio recusandae nobis itaque in unde dolorem quam nesciunt dignissimos maxime aspernatur, ullam aut accusamus vero eius odit quasi sunt quis!

.kl-5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, dolores!