gistfile1.html

<div class="wrapper">
    <div class="grid">
        <div class="grid__cell grid__cell--content">
            <h1>
                Hello world.
            </h1>
            <div class="grid">
                <div class="grid__cell grid__cell--inner">
                    <h2>
                        Hello world.
                    </h2>
                </div>
                <div class="grid__cell grid__cell--inner">
                    <h2>
                        Hello world.
                    </h2>
                </div>
                <div class="grid__cell grid__cell--inner">
                    <h2>
                        Hello world.
                    </h2>
                </div>
                <div class="grid__cell grid__cell--inner">
                    <h2>
                        Hello world.
                    </h2>
                </div>
                <div class="grid__cell grid__cell--inner">
                    <h2>
                        Hello world.
                    </h2>
                </div>
            </div>
        </div>
    </div>
</div>

gistfile2.scss

@include breakpoint(12) {
    
	.grid__cell--content {
		width: fixed(10);
	}

	.grid__cell--inner {
		width: fixed(2);
	}

}

Using the fluid() helper was causing problems and not sizing the columns correctly for some reason, whereas fixed did.