Install the extension gridelements and include it at Include static (from extensions). Create a folder fileadmin/templates/grids/ and add the files
<!-- section.html -->
<section class="{classesSection} {layout} frame-{frame-class} {f:if(condition: '{frame-space-before}', then: ' frame-space-before-{frame-space-before}', else: '')} {f:if(condition: '{frame-space-after}', then: ' frame-space-after-{frame-space-after}', else: '')}" id="{elementID}">
<f:format.raw>{data.tx_gridelements_view_column_401}</f:format.raw>
</section>
<!-- /section.html --><!-- 1_col.html -->
<div class="{classesContainer} {layout} frame-{frame-class} {f:if(condition: '{frame-space-before}', then: ' frame-space-before-{frame-space-before}', else: '')} {f:if(condition: '{frame-space-after}', then: ' frame-space-after-{frame-space-after}', else: '')}" id="{elementID}">
<div class="{classesRow}">
<div class="{classesCol_1}">
<f:format.raw>{data.tx_gridelements_view_column_401}</f:format.raw>
</div>
</div>
</div>
<!-- /1_col.html --><!-- 2_cols.html -->
<div class="{classesContainer} {layout} frame-{frame-class} {f:if(condition: '{frame-space-before}', then: ' frame-space-before-{frame-space-before}', else: '')} {f:if(condition: '{frame-space-after}', then: ' frame-space-after-{frame-space-after}', else: '')}" id="{elementID}">
<div class="{classesRow}">
<div class="{classesCol_1}">
<f:format.raw>{data.tx_gridelements_view_column_401}</f:format.raw>
</div>
<div class="{classesCol_2}">
<f:format.raw>{data.tx_gridelements_view_column_402}</f:format.raw>
</div>
</div>
</div>
<!-- /2_cols.html --><!-- 3_cols.html -->
<div class="{classesContainer} {layout} frame-{frame-class} {f:if(condition: '{frame-space-before}', then: ' frame-space-before-{frame-space-before}', else: '')} {f:if(condition: '{frame-space-after}', then: ' frame-space-after-{frame-space-after}', else: '')}" id="{elementID}">
<div class="{classesRow}">
<div class="{classesCol_1}"><f:format.raw>{data.tx_gridelements_view_column_401}</f:format.raw></div>
<div class="{classesCol_2}"><f:format.raw>{data.tx_gridelements_view_column_402}</f:format.raw></div>
<div class="{classesCol_3}"><f:format.raw>{data.tx_gridelements_view_column_403}</f:format.raw></div>
</div>
</div>
<!-- /3_cols.html --><!-- 4_cols.html -->
<div class="{classesContainer} {layout} frame-{frame-class} {f:if(condition: '{frame-space-before}', then: ' frame-space-before-{frame-space-before}', else: '')} {f:if(condition: '{frame-space-after}', then: ' frame-space-after-{frame-space-after}', else: '')}" id="{elementID}">
<div class="{classesRow}">
<div class="{classesCol_1}"><f:format.raw>{data.tx_gridelements_view_column_401}</f:format.raw></div>
<div class="{classesCol_2}"><f:format.raw>{data.tx_gridelements_view_column_402}</f:format.raw></div>
<div class="{classesCol_3}"><f:format.raw>{data.tx_gridelements_view_column_403}</f:format.raw></div>
<div class="{classesCol_4}"><f:format.raw>{data.tx_gridelements_view_column_404}</f:format.raw></div>
</div>
</div>
<!-- /4_cols.html -->tt_content.gridelements_pi1.20.10.setup {
section < lib.gridelements.defaultGridSetup
section {
cObject = FLUIDTEMPLATE
cObject {
file = fileadmin/templates/grids/section.html
variables {
classesSection = COA
classesSection {
10 = LOAD_REGISTER
10 = TEXT
10.data = field:flexform_classesSection
20 = TEXT
20.stdWrap.dataWrap = {register:classesSection}
30 = RESTORE_REGISTER
}
elementID = TEXT
elementID.field = uid
elementID.wrap = grid-|
layout = TEXT
layout.field = layout
layout.wrap = layout-|
frame-class = TEXT
frame-class.field = frame_class
frame-space-before = TEXT
frame-space-before.field = space_before_class
frame-space-after = TEXT
frame-space-after.field = space_after_class
}
}
wrap = |
}
one_col < .section
one_col {
cObject = FLUIDTEMPLATE
cObject {
file = fileadmin/templates/grids/1_col.html
variables {
classesContainer = COA
classesContainer {
10 = LOAD_REGISTER
10 = TEXT
10.data = field:flexform_classesContainer
20 = TEXT
20.stdWrap.dataWrap = {register:classesContainer}
30 = RESTORE_REGISTER
}
classesRow = COA
classesRow {
10 = LOAD_REGISTER
10 = TEXT
10.data = field:flexform_classesRow
20 = TEXT
20.stdWrap.dataWrap = {register:classesRow}
30 = RESTORE_REGISTER
}
classesCol_1 = COA
classesCol_1 {
10 = LOAD_REGISTER
10 = TEXT
10.data = field:flexform_classesCol_1
20 = TEXT
20.stdWrap.dataWrap = {register:classesCol_1}
30 = RESTORE_REGISTER
}
}
}
wrap = |
}
two_cols < .one_col
two_cols {
cObject = FLUIDTEMPLATE
cObject {
file = fileadmin/templates/grids/2_cols.html
variables < tt_content.gridelements_pi1.20.10.setup.one_col.cObject.variables
variables {
classesCol_2 = COA
classesCol_2 {
10 = LOAD_REGISTER
10 = TEXT
10.data = field:flexform_classesCol_2
20 = TEXT
20.stdWrap.dataWrap = {register:classesCol_2}
30 = RESTORE_REGISTER
}
}
}
}
three_cols < .two_cols
three_cols {
cObject = FLUIDTEMPLATE
cObject {
file = fileadmin/templates/grids/3_cols.html
variables < tt_content.gridelements_pi1.20.10.setup.two_cols.cObject.variables
variables {
classesCol_3 = COA
classesCol_3 {
10 = LOAD_REGISTER
10 = TEXT
10.data = field:flexform_classesCol_3
20 = TEXT
20.stdWrap.dataWrap = {register:classesCol_3}
30 = RESTORE_REGISTER
}
}
}
}
four_cols < .three_cols
four_cols {
cObject = FLUIDTEMPLATE
cObject {
file = fileadmin/templates/grids/4_cols.html
variables < tt_content.gridelements_pi1.20.10.setup.three_cols.cObject.variables
variables {
classesCol_4 = COA
classesCol_4 {
10 = LOAD_REGISTER
10 = TEXT
10.data = field:flexform_classesCol_4
20 = TEXT
20.stdWrap.dataWrap = {register:classesCol_4}
30 = RESTORE_REGISTER
}
}
}
}
}tx_gridelements.setup {
# section
section {
title = Section
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Content
colPos = 401
}
}
}
}
}
# icon = EXT:nxbase/ext_icon.gif
flexformDS (
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<type>array</type>
<el type="array">
<classesSection type="array">
<TCEforms type="array">
<label>Class(es) for the section:</label>
<config type="array">
<type>input</type>
<default></default>
</config>
</TCEforms>
</classesSection>
</el>
</ROOT>
</T3DataStructure>
)
}
# /section
# one_col
one_col {
title = 1 column
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Content
colPos = 401
}
}
}
}
}
# icon = EXT:nxbase/ext_icon.gif
flexformDS (
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<type>array</type>
<el type="array">
<classesContainer type="array">
<TCEforms type="array">
<label>Class(es) for container:</label>
<config type="array">
<type>input</type>
<default>container</default>
</config>
</TCEforms>
</classesContainer>
<classesRow type="array">
<TCEforms type="array">
<label>Class(es) for row:</label>
<config type="array">
<type>input</type>
<default>row</default>
</config>
</TCEforms>
</classesRow>
<classesCol_1 type="array">
<TCEforms type="array">
<label>Class(es) for column 1</label>
<config type="array">
<type>input</type>
<default>col-12</default>
</config>
</TCEforms>
</classesCol_1>
</el>
</ROOT>
</T3DataStructure>
)
}
# /one_col
# two_cols
two_cols {
title = 2 columns
config {
colCount = 2
rowCount = 1
rows {
1 {
columns {
1 {
name = Content left column
colPos = 401
}
2 {
name = Content right column
colPos = 402
}
}
}
}
}
# icon = EXT:nxbase/ext_icon.gif
flexformDS (
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<type>array</type>
<el type="array">
<classesContainer type="array">
<TCEforms type="array">
<label>Class(es) for container:</label>
<config type="array">
<type>input</type>
<default>container</default>
</config>
</TCEforms>
</classesContainer>
<classesRow type="array">
<TCEforms type="array">
<label>Class(es) for row</label>
<config type="array">
<type>input</type>
<default>row</default>
</config>
</TCEforms>
</classesRow>
<classesCol_1 type="array">
<TCEforms type="array">
<label>Class(es) for column 1</label>
<config type="array">
<type>input</type>
<default>col-12 col-md-6</default>
</config>
</TCEforms>
</classesCol_1>
<classesCol_2 type="array">
<TCEforms type="array">
<label>Class(es) for column 2</label>
<config type="array">
<type>input</type>
<default>col-12 col-md-6</default>
</config>
</TCEforms>
</classesCol_2>
</el>
</ROOT>
</T3DataStructure>
)
}
# /two_cols
# three_cols
three_cols {
title = 3 columns
config {
colCount = 3
rowCount = 1
rows {
1 {
columns {
1 {
name = Content left column
colPos = 401
}
2 {
name = Content middle column
colPos = 402
}
3 {
name = Content right column
colPos = 403
}
}
}
}
}
# icon = EXT:nxbase/ext_icon.gif
flexformDS (
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<type>array</type>
<el type="array">
<classesContainer type="array">
<TCEforms type="array">
<label>Cass(es) for container:</label>
<config type="array">
<type>input</type>
<default>container</default>
</config>
</TCEforms>
</classesContainer>
<classesRow type="array">
<TCEforms type="array">
<label>Class(es) for row:</label>
<config type="array">
<type>input</type>
<default>row</default>
</config>
</TCEforms>
</classesRow>
<classesCol_1 type="array">
<TCEforms type="array">
<label>Class(es) for column 1</label>
<config type="array">
<type>input</type>
<default>col-4</default>
</config>
</TCEforms>
</classesCol_1>
<classesCol_2 type="array">
<TCEforms type="array">
<label>Class(es) for column 2</label>
<config type="array">
<type>input</type>
<default>col-4</default>
</config>
</TCEforms>
</classesCol_2>
<classesCol_3 type="array">
<TCEforms type="array">
<label>Class(es) for column 3</label>
<config type="array">
<type>input</type>
<default>col-4</default>
</config>
</TCEforms>
</classesCol_3>
</el>
</ROOT>
</T3DataStructure>
)
}
# /three_cols
# four_cols
four_cols {
title = 4 columns
config {
colCount = 4
rowCount = 1
rows {
1 {
columns {
1 {
name = Content column 1
colPos = 401
}
2 {
name = Content column 2
colPos = 402
}
3 {
name = Content column 3
colPos = 403
}
4 {
name = Content column 4
colPos = 404
}
}
}
}
}
# icon = EXT:nxbase/ext_icon.gif
flexformDS (
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<type>array</type>
<el type="array">
<classesContainer type="array">
<TCEforms type="array">
<label>Class(es) for container:</label>
<config type="array">
<type>input</type>
<default>container</default>
</config>
</TCEforms>
</classesContainer>
<classesRow type="array">
<TCEforms type="array">
<label>Class(es) for row:</label>
<config type="array">
<type>input</type>
<default>row</default>
</config>
</TCEforms>
</classesRow>
<classesCol_1 type="array">
<TCEforms type="array">
<label>Class(es) for column 1</label>
<config type="array">
<type>input</type>
<default>col-3</default>
</config>
</TCEforms>
</classesCol_1>
<classesCol_2 type="array">
<TCEforms type="array">
<label>Class(es) for column 2</label>
<config type="array">
<type>input</type>
<default>col-3</default>
</config>
</TCEforms>
</classesCol_2>
<classesCol_3 type="array">
<TCEforms type="array">
<label>Class(es) for column 3</label>
<config type="array">
<type>input</type>
<default>col-3</default>
</config>
</TCEforms>
</classesCol_3>
<classesCol_4 type="array">
<TCEforms type="array">
<label>Class(es) for column 4</label>
<config type="array">
<type>input</type>
<default>col-3</default>
</config>
</TCEforms>
</classesCol_4>
</el>
</ROOT>
</T3DataStructure>
)
}
# /four_cols
}