Watch it changing for <span class="docs-grid-text-tiny">tiny</span>,
<span class="docs-grid-text-small">small</span>,
<span class="docs-grid-text-medium">medium</span>,
<span class="docs-grid-text-large">large</span>,
<span class="docs-grid-text-xlarge">xlarge</span>,
<span class="docs-grid-text-2xlarge">2xlarge</span> and
<span class="docs-grid-text-3xlarge">3xlarge</span> widths!

<p>
    <strong class="nx-margin-top-0 nx-margin-bottom-xs">Use two inputs:</strong>
</p>
<div nxLayout="grid" class="docs-grid-colored-grid">
    <div nxRow>
        <div nxCol="12,8" class="docs-grid-colored-col">
            <code
                >nxCol=<wbr />"12,8"<br />
                => nxCol=<wbr />"<span class="docs-grid-text-tiny">12</span
                >,<span class="docs-grid-text-small">8</span>,<span
                    class="docs-grid-text-medium"
                    >8</span
                >,<span class="docs-grid-text-large">8</span>,<span
                    class="docs-grid-text-xlarge"
                    >8</span
                >,<span class="docs-grid-text-2xlarge">8</span>,<span
                    class="docs-grid-text-3xlarge"
                    >8</span
                >"
            </code>
        </div>
    </div>
</div>

<p>
    <strong class="nx-margin-top-0 nx-margin-bottom-xs"
        >Use three inputs:</strong
    >
</p>
<div nxLayout="grid" class="docs-grid-colored-grid">
    <div nxRow>
        <div nxCol="12,8,6" class="docs-grid-colored-col">
            <code
                >nxCol=<wbr />"12,8,6"<br />
                => nxCol=<wbr />"<span class="docs-grid-text-tiny">12</span
                >,<span class="docs-grid-text-small">8</span>,<span
                    class="docs-grid-text-medium"
                    >6</span
                >,<span class="docs-grid-text-large">6</span>,<span
                    class="docs-grid-text-xlarge"
                    >6</span
                >,<span class="docs-grid-text-2xlarge">6</span>,<span
                    class="docs-grid-text-3xlarge"
                    >6</span
                >"
            </code>
        </div>
    </div>
</div>

<p>
    <strong class="nx-margin-top-0 nx-margin-bottom-xs"
        >Use four inputs:</strong
    >
</p>
<div nxLayout="grid" class="docs-grid-colored-grid">
    <div nxRow>
        <div nxCol="12,8,6,4" class="docs-grid-colored-col">
            <code
                >nxCol=<wbr />"12,8,6,4"<br />
                => nxCol=<wbr />"<span class="docs-grid-text-tiny">12</span
                >,<span class="docs-grid-text-small">8</span>,<span
                    class="docs-grid-text-medium"
                    >6</span
                >,<span class="docs-grid-text-large">4</span>,<span
                    class="docs-grid-text-xlarge"
                    >4</span
                >,<span class="docs-grid-text-2xlarge">4</span>,<span
                    class="docs-grid-text-3xlarge"
                    >4</span
                >"
            </code>
        </div>
    </div>
</div>

<span><b>......</b></span>

<p>
    <strong class="nx-margin-top-0 nx-margin-bottom-xs"
        >Use seven inputs:</strong
    >
</p>
<div nxLayout="grid" class="docs-grid-colored-grid">
    <div nxRow>
        <div nxCol="12,8,6,4,3,4,3" class="docs-grid-colored-col">
            <code
                >nxCol=<wbr />"12,8,6,4,3,4,3"<br />
                => nxCol=<wbr />"<span class="docs-grid-text-tiny">12</span
                >,<span class="docs-grid-text-small">8</span>,<span
                    class="docs-grid-text-medium"
                    >6</span
                >,<span class="docs-grid-text-large">4</span>,<span
                    class="docs-grid-text-xlarge"
                    >3</span
                >,<span class="docs-grid-text-2xlarge">4</span>,<span
                    class="docs-grid-text-3xlarge"
                    >3</span
                >"
            </code>
        </div>
    </div>
</div>