.. ==================================================
.. FOR YOUR INFORMATION
.. --------------------------------------------------
.. -*- coding: utf-8 -*- with BOM.

.. include:: ../../../../../Includes.txt


.. _users_bestpractice_layouts_element_sameheight:


.. index::
    pair:layout;data equalizer


Same Height for all columns
===========================

You can set the height of all columns to the same value. Currently, this feature
is only available if you use the responsive Framework Foundation.


Frontend
--------

.. figure:: typo3_start_sample_data-equalizer_frontend_01.jpg
	:width: 800px
	:alt: Same height for all columns (frontend)

	Same height for all columns (frontend)

All four columns have the same height in the illustration above.


Backend
-------

.. figure:: typo3_start_sample_data-equalizer_backend_01.jpg
	:width: 800px
	:alt: Gridelement with four columns in the backend

	Gridelement with four columns in the backend

The corresponding layout in the backend.


.. figure:: typo3_start_sample_data-equalizer_backend_02.jpg
	:width: 800px
	:alt: Option: Same height for all columns

	Option: Same height for all columns

If you like same height for all columns, please activate the checkbox.

If you want to add a CSS class to a specific column, you are welcome.
How to find defined CSS classes is shown in the following figure.

.. figure:: typo3_start_sample_data-equalizer_backend_04.jpg
	:width: 800px
	:alt: Defined CSS classes

	Defined CSS classes

Here you will find defined CSS classes:

* Tab [Appearance] > field: CSS class (defined)