<% switch (m.object_type) { %> <% case 'grouping': %>

Grouping

Groupings are a way of putting one or more slots into a single container.

The HTML around this grouping will look like this:

<% break; %> <% case 'space': %>

Whitespace

Whitespaces let you add some space on a layout. This space can be empty, or you enter some custom HTML in the box below.

The HTML around this whitespace will look like this:

<% break; %> <% case 'slot': %>

Slot

Slots are the most common element, have a width in columns, and may contain plugins.

The HTML around this slot will look like this:

<% break; %> <% case 'grid_break': %>

Gridbreak

A gridbreak splits the grid into two different containers (or into three containers if you use a second gridbreak, into four containers if you use a third break break, and so on).

A common use for gridbreaks is to split a layout into a header, body and footer (though you can have as many containers as you wish).

Each grid layout has at least one container. Each gridbreak you add to the layout creates an additional container. The HTML for two containers separated by a gridbreak looks like this:

<% break; %> <% case 'grid_break_with_slot': %>

Gridbreak + slot

A gridbreak splits the grid into two different containers (or into three containers if you use a second gridbreak, into four containers if you use a third break break, and so on).

To create a slot that appears outside of the grid layout, you can use a “Gridbreak + slot”. This gives you a gridbreak, and places a slot in the break outside of the containers.

The HTML such a slot looks like this:

<% break; %> <% } %> <% switch (m.object_type) { %> <% case 'grouping': %> <% case 'space': %> <% case 'slot': %>

					<div class="span
						span{{m.data.width|escape}}{{m.cell.is_alpha? ' alpha' : ''}}{{m.cell.is_omega? ' omega' : ''}}{{m.object_type == 'space'? ' grid_space' : ''}}
						{{m.object_type == 'slot'? 'slot [[Name]]' : ''}}
						[[Additional class name(s)]]
						...
					">

    ...
</div>
<% break; %> <% case 'grid_break': %> <% case 'grid_break_with_slot': %>
				<div class="...">

    <div class="container container{{m.data.width|escape}}">
        ...
    </div>
</div> <% if (m.object_type == 'grid_break') { %>
<!-- This is the gridbreak here --> <% } else { %>
<!-- The gridbreak starts here -->
<div class="slot [[Name]] [[Additional class name(s)]]">
    ...
</div>
<!-- The gridbreak ends here --> <% } %>
<div class="[[CSS class name(s) for the following container]] ...">
    <div class="container container{{m.data.width|escape}}">
        ...
    </div>
</div>
<% break; %> <% } %>
<% if (m.object_type == 'slot' || m.object_type == 'grid_break_with_slot') { %>

{{zenarioA.phrase.gridSlotName}}

{{zenarioGM.getSlotDescription(m.slot)}}
<% } %> <% if (m.object_type != 'grid_break' && m.object_type != 'grid_break_with_slot') { %>
{{m.data.width|e}} {{zenario.applyMergeFieldsN(zenarioA.phrase.column, zenarioA.phrase.columns, m.data.width)}}
<% } %> <% if (m.object_type != 'grid_break') { %>

{{zenarioA.phrase.gridCSSClass}}

<% } %> <% if (m.object_type == 'space') { %>

{{zenarioA.phrase.gridHtml}}

<% } %> <% var show = false, showFirst = false, showOnly = false; %> <% if (m.object_type == 'grid_break' || m.object_type == 'grid_break_with_slot') { %> <% if (m.object_type == 'grid_break_with_slot') { %> <% show = showOnly = true; %> <% } %> <% } else if (m.lib.data.responsive && m.object_type == 'space') { %>

<% } else if (m.lib.data.responsive) { %> <% show = true; %> <% var isLastSlot = !m.cell.is_alpha && m.cell.is_omega; %> <% var isFullSlot = m.cell.is_alpha && m.cell.at_right_edge; %> <% if (isLastSlot) { %> <% showFirst = true; %> <% } else if (isFullSlot) { %> <% showOnly = true; %> <% } %> <% } %> <% if (show) { %>


<% if (showFirst) { %>
<% } %> <% if (showOnly) { %>
<% } %>

<% } %> <% if (m.object_type == 'grid_break' || m.object_type == 'grid_break_with_slot') { %>

To style each container differently, you should give them a different CSS class name. (For example, “Gridbreak_Header”, “Gridbreak_Body”, or “Gridbreak_Footer”.)

Tip: To give the very first container a CSS class name, create a gridbreak and place it at the very start of the layout.

{{zenarioA.phrase.gridGridCSSClass}}

<% } %>