{namespace flux=FluidTYPO3\Flux\ViewHelpers}

<f:layout name="Content" />

<div xmlns="http://www.w3.org/1999/xhtml" xmlns:flux="http://fedext.net/ns/flux/ViewHelpers" xmlns:v="http://fedext.net/ns/vhs/ViewHelpers" xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
	<f:section name="Configuration">
		<flux:form id="fourColumns" label="Four Columns (1 | 1 | 1 | 1)" description="Provides four columns to be filled with content elements." wizardTab="Grids">
			<flux:flexform.grid>
				<flux:grid.row>
					<flux:grid.column  style="width: 25%">
						<flux:form.content name="FirstColumn" label="First column" />
					</flux:grid.column>
					<flux:grid.column  style="width: 25%">
						<flux:form.content name="SecondColumn" label="Second column" />
					</flux:grid.column>
					<flux:grid.column  style="width: 25%">
						<flux:form.content name="ThirdColumn" label="Third column" />
					</flux:grid.column>
					<flux:grid.column  style="width: 25%">
						<flux:form.content name="FourthColumn" label="Fourth column" />
					</flux:grid.column>
				</flux:grid.row>
			</flux:grid>
		</flux:form>
	</f:section>

	<f:section name="Preview">
		<strong>[GRID] Four Columns (1 | 1 | 1 | 1)</strong>
		<flux:widget.grid />
	</f:section>

	<f:section name="Main">
		<div class="grid">
			<div class="gi one-quarter">
				<flux:content.render area="FirstColumn" />
			</div>
			<div class="gi one-quarter">
				<flux:content.render area="SecondColumn" />
			</div>
			<div class="gi one-quarter">
				<flux:content.render area="ThirdColumn" />
			</div>
			<div class="gi one-quarter">
				<flux:content.render area="FourthColumn" />
			</div>
		</div>
	</f:section>
</div>