Primer

HTML

<div class="inner clearfix patternlab-grid-display">
	<div class="large-col-12">One column</div>
	<div class="large-col-6">Two columns</div>
	<div class="large-col-6">Two columns</div>
	<div class="large-col-4">Three columns</div>
	<div class="large-col-4">Three columns</div>
	<div class="large-col-4">Three columns</div>
	<div class="large-col-3">Four columns</div>
	<div class="large-col-3">Four columns</div>
	<div class="large-col-3">Four columns</div>
	<div class="large-col-3">Four columns</div>

	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>


</div>

Twig

<div class="inner clearfix patternlab-grid-display">
	<div class="large-col-12">One column</div>
	<div class="large-col-6">Two columns</div>
	<div class="large-col-6">Two columns</div>
	<div class="large-col-4">Three columns</div>
	<div class="large-col-4">Three columns</div>
	<div class="large-col-4">Three columns</div>
	<div class="large-col-3">Four columns</div>
	<div class="large-col-3">Four columns</div>
	<div class="large-col-3">Four columns</div>
	<div class="large-col-3">Four columns</div>

	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>


</div>

{
    "row": {
        "1": {
            "span": "6"
        },
        "2": {
            "span": "6"
        }
    }
}

One column

Two columns

Three columns

Four columns