Regional University Computing Center Kaiserslautern-Landau

Grid elements

To structure pages, grid elements can be used to arrange the contents of a web page in multiple columns. If a lot of information is to be displayed uniformly and transparently on a web page, grid elements help with the arrangement.

 

example

Example element from the frontend: The website of the TU Kaiserslautern is shown. Furthermore, the departments are arranged in a four-column grid over 4 lines.
Example element from the frontend: 4 column as grid element

Here a 4-column was used to arrange the different departments clearly and space-saving.

 

instruction

  • Create a new content element at the designated position
  • Select the desired layout under the Grid elements tab
  • if necessary, assign a heading for the grid element
  • Save
Example element from the Typo3 backend: The content element selection window is shown. A red box has been placed around the Grid Element tab and the associated selection options below it.
Example element from Typo3 backend: options of grid elements

Now a grid element is 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.

Example element from the Typo3 backend: In the edit bar a created grid element is shown. Next to it, the content creation icons it contains are also highlighted with a red border. Content creation in grid elements
Example element from Typo3 backend: content creation in grid elements

Layout grid elements

Example element from the Typo3 backend and frontend The illustration is in two parts. The upper part shows the editing bar from the backend. There two grid elements are positioned next to each other. There are also three red boxes above the editing icons of the grid element and the two content elements in the grid element. The second part shows different layouts in the frontend. On top the standard layout, in the middle the formatted grid (white box around both content elements) and below the formatted grid content element (two white single boxes).
Example element from Typo3 backend and frontend: layouts of grid elements

When you have completed your grid element, you can specify its layout.

You can either set the layout for the grid, or for the individual content items in the grid.

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

Example

Example element from the frontend: A 1-column grid element is shown.
Example element from the frontend: 1-splitter

1-splitter

Example element from the frontend: A 2-column grid element is shown.
Example element from the frontend: 2-splitter

2-splitter

 

Example element from the frontend: a 2 column with dimensions of 75-25 grid element is shown.
Example element from the frontend: 2-splitter 75-25

2-spiltter 75-25

 

Example element from the frontend: A 3-column grid element with the dimensions 50-25-25 is shown.
Example element from the frontend: 3-splitter

3-splitter

 

Example element from the frontend: A 4-column grid element is shown.
Example element from the frontend: 4-splitter

4-splitter

 

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

Exercise - Grid element
Read more
Favorable layout combinations
Read more