Regional University Computing Center Kaiserslautern-Landau

Grid elements

To structure pages, grid elements can be used to arrange the content of a website in several columns . If a lot of information is to be displayed uniformly and transparently on a website, grid elements help with the layout.

Example

A 4-splitter was used here to arrange the various faculties in a clear and space-saving manner.

Instructions

  • Create a new content element at the intended location
  • Select the desired layout under the Grid elements tab
  • If necessary, assign a heading for the grid element
  • Save

A grid element is now available, which in turn can be filled with content elements.

To do this, you can create content elements in the grid element itself as usual or place them in the grid from outside using drag-and-drop.

Layout grid elements

Once you have completed your grid element, you can define its layout .

You can either define the layout for the grid or for the individual content elements in the grid.

If you change the layout of the individual content elements, you can achieve a visual separation between them.

Examples

1-splitter

2-splitter

2-splitter 75-25

3-splitter

4-splitter

You are in self-study and would like to go to the training start page, then click on TYPO3 self-study for beginners part 1.

You are currently in self-training, then click on Exercise - Grid elements to continue.

Exercise - Grid element
Read more
Favorable layout combinations
Read more