---
title: "Layouts"
manual: "ConRat Photo Gallery"
version: "main"
permalink: "https://docs.typo3.org/permalink/conratwebsolutions/crgalerie:layouts@main"
source: "Layouts/Index.rst"
rendered: "2026-10-17T17:06:22+00:00"
---

# Layouts {#layouts}

Every **Gallery** and **Gallery overview** element has its
own layout (tab **Display** \> **Layout**). All layouts use
responsive image sizes, lazy loading and the same lightbox. The column count
and row height can be changed with CSS variables, see
[CSS variables](https://docs.typo3.org/permalink/conratwebsolutions/crgalerie:configuration-css@main). All four layouts can be tried in the
[live demo](https://demotypo14.conrat-projects.de/fotogalerie).

## Mosaic in rows {#layout-rows}

![Layout "Mosaic in rows"](../Images/layout-mosaik-zeilen.jpg)

Images stand in rows of equal height and fill the full width. Every image
stays complete – portrait and landscape formats are not cropped. This is the
default and fits almost any selection of images.

-   **Settings**

    Row height `--crg-zeilenhoehe` (from 600 px, default 220px) and
    `--crg-zeilenhoehe-mobil` (default 100px).

-   **Limitations**

    The last row is not stretched and may end before the right edge.

## Grid {#layout-grid}

![Layout "Grid"](../Images/layout-raster.jpg)

All thumbnails have the same format and stand in a calm, even grid. The
thumbnail is cropped for this; the lightbox shows the whole image. Good for
series and pages with a uniform look.

-   **Settings**

    Columns `--crg-spalten` (desktop, default 4), `--crg-spalten-tablet`
    (default 3), `--crg-spalten-mobil` (default 2).

-   **Limitations**

    Thumbnails are cropped at the center.

## Mosaic in columns {#layout-columns}

![Layout "Mosaic in columns"](../Images/layout-mosaik-spalten.jpg)

Images flow in columns, each in its own aspect ratio. Portrait images look
especially good here.

-   **Settings**

    Columns as for the grid.

-   **Limitations**

    The order runs column by column from top to bottom. Lightbox, keyboard
    and screen readers follow the order of the HTML, which differs from the
    visual arrangement.

## Large cover image and grid {#layout-cover}

![Layout "Large cover image and grid"](../Images/layout-titelbild.jpg)

The first image is shown large as cover image, the others follow in a grid.
This gives a gallery a clear start, e.g. for an event or a project.

-   **Settings**

    Columns as for the grid. The cover image is the first image in the order
    of the module – drag the desired image to position 1.

-   **Limitations**

    The cover image and the grid tiles are cropped.

## Gallery overview {#layout-overview}

![Gallery overview with tiles](../Images/uebersicht.jpg)

The **Gallery overview** shows one tile per gallery with its first
image, title and number of photos. The overview does not load the lightbox.
A click opens the gallery on the same page in the layout chosen in the
element.