Is nesting supported?

[henrywright]

Is nesting supported? For example:

<div class="container">
	<div class="row">
		<div class="col-3">
			
		</div><!-- .col-3 -->
		<div class="col-9">
			<div class="row">
				<div class="col-6">
					
				</div><!-- .col-6 -->
				<div class="col-6">
					
				</div><!-- .col-6 -->
			</div><!-- .row -->
		</div><!-- .col-9 -->
	</div><!-- .row -->
</div><!-- .container -->

[remysheppard]

You could always try it and find out ;)

But yes, nesting is supported natively because all of the widths are defined relative to the container they're in (either the browser as a whole, or a specific cell).

You do have to be careful on sizing down though, as all of the containers are given padding/margins and 94~% width on mobile screens, so you might end up with smaller and smaller "full width" areas.

[henrywright]

Thanks I'll give it a try!

[Wyzix33]

There is a small gap when nesting on one row and not nesting on another here is a pic:

as you can see row 2 has a bit more space between the edge and where the inputs end, the margin is

margin: 3px .5%

when i looked at the Computed value i get
margin-left: 1.6875px;
margin-right: 1.6875px;
0.5%.form [class^="col"]
for the column on row one
and
margin-left: 3.40625px;
margin-right: 3.40625px;
0.5%.form [class^="col"]

and as you can see it's a bit off

can this be fixed?

Thanks

[BelleNottelling]

I'm late to the party here here, but yes this does support nesting and it's even mentioned in the readme.
But as already pointed out it renders oddly:

I have a fork of this called Simple Grid+ and I'm about to release the v2 version of it which has quite a few changes, one of which has columns consume all of the space provided for them, eliminating that odd gap and makes them render as expected:

Just putting that out there for anyone who ends up coming across this library in the future :)