Basic Usage Grid

basic-usage-grid

### Basic Usage

<section>

    <div class="container">

        <div class="row">

            <div class="columns-2">

                A column with a width of 50%. Fixed to 2 columns.

            </div>

            <div class="columns-2">

                A column with a width of 50%. Fixed to 2 columns.

            </div>

        </div>

        <div class="row">

            <div class="columns-50">

                An alternate method for a column with 50% width. This should be used for multiple columns with different widths, all equaling to 100%.

            </div>

            <div class="columns-30">

                A column with 30% width.

            </div>

            <div class="columns-20">

                A column with 20% width.

            </div>

        </div>

    </div>

</section>

<div class="container"> // optional - for fixed with breakpoints

	<div class="row"> // required

		<div class="columns-2">

        	<div class="row">  // Nesting

				<div class="columns-2">

				</div>

                <div class="columns-2">

                </div>

            </div>

        </div>

        <div class="columns-2">

        </div>

    </div>

</div>


## Advanced usage

By setting the custom class variables for your columns and container in your _base.scss, _settings.scss, or _variables.scss you can work with Juice more semantically.

# For mixed widths, percentage based

<div class="row">

	<div class="columns-30"> // default classes

	</div>

	<div class="customClass-4"> // custom classes

	</div>

	<div data-columns=".3"> // Using data attributes

	</div>

</div>

# For equal widths

<div class="row">

	<div class="columns-3"> // default classes

	</div>

	<div class="customClass-3"> // custom classes

	</div>

	<div data-columns="3"> // Using data attributes

	</div>

</div>

# Scss
# @include container-fixed($gutter: $gutter, $padded: false);
# @include columns($num, $display: float, $gutter: $gutter);
# @include grid($display: float, $gutter: $gutter);

.example-wrapper {
	@include grid();
	.example-column {
		// note: including columns within breakpoint mixin is required.
		@include breakpoint($small) {
    			@include columns(2);
    		}
	}
}