Positioning tiles | laravel-dashboard | Spatie

 SPATIE

  Laravel Dashboard
====================

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-dashboard](https://spatie.be/docs/laravel-dashboard/v3)  Basic-usage  Positioning tiles

 Version   v4   v3   v2   v1

 Other versions for crawler [v4](https://spatie.be/docs/laravel-dashboard/v4) [v3](https://spatie.be/docs/laravel-dashboard/v3) [v2](https://spatie.be/docs/laravel-dashboard/v2) [v1](https://spatie.be/docs/laravel-dashboard/v1)

- [ Introduction ](https://spatie.be/docs/laravel-dashboard/v3/introduction)
- [ Support us ](https://spatie.be/docs/laravel-dashboard/v3/support-us)
- [ Requirements ](https://spatie.be/docs/laravel-dashboard/v3/requirements)
- [ Installation & setup ](https://spatie.be/docs/laravel-dashboard/v3/installation-setup)
- [ Upgrading ](https://spatie.be/docs/laravel-dashboard/v3/upgrading)
- [ Questions and issues ](https://spatie.be/docs/laravel-dashboard/v3/questions-issues)
- [ Changelog ](https://spatie.be/docs/laravel-dashboard/v3/changelog)
- [ About us ](https://spatie.be/docs/laravel-dashboard/v3/about-us)

Usage
-----

- [ Creating your first dashboard ](https://spatie.be/docs/laravel-dashboard/v3/basic-usage/creating-your-first-dashboard)
- [ Positioning tiles ](https://spatie.be/docs/laravel-dashboard/v3/basic-usage/positioning-tiles)
- [ Customizing the views ](https://spatie.be/docs/laravel-dashboard/v3/basic-usage/customizing-the-views)

Adding tiles
------------

- [ Overview ](https://spatie.be/docs/laravel-dashboard/v3/adding-tiles/overview)
- [ Creating your own tile ](https://spatie.be/docs/laravel-dashboard/v3/adding-tiles/creating-your-own-tile)
- [ Google calendar tile ](https://spatie.be/docs/laravel-dashboard/v3/adding-tiles/google-calendar)
- [ Time and Weather tile ](https://spatie.be/docs/laravel-dashboard/v3/adding-tiles/time-weather)
- [ Oh Dear Uptime tile ](https://spatie.be/docs/laravel-dashboard/v3/adding-tiles/oh-dear-uptime)
- [ Twitter tile ](https://spatie.be/docs/laravel-dashboard/v3/adding-tiles/twitter-tile)
- [ Velo tile ](https://spatie.be/docs/laravel-dashboard/v3/adding-tiles/velo)
- [ Belgian trains tile ](https://spatie.be/docs/laravel-dashboard/v3/adding-tiles/belgian-trains)
- [ Attendances tile ](https://spatie.be/docs/laravel-dashboard/v3/adding-tiles/attendances)

      You are viewing the documentation for **an older version** of this package. You can check the version you are using with the following command:

 `                                    composer show spatie/laravel-dashboard                                                                                                                                                                                                                                    `

Positioning tiles
=================

Most tiles accept a position property. You can pass a single position like `a1`. You should imagine the dashboard as an excel-like layout. The columns are represented by letters, the rows by number. The first letter, `a`, represents the first column. The `1` represents the first row. You an also pass ranges. Here are a few examples.

- `a1`: display the tile in the top left corner
- `b2`: display a tile in the second row of the second column
- `a1:a3`: display a tile over the three first rows of the first column
- `b1:c2`: display the tile as a square starting at the first row of the second column to the second row of the third column

The dashboard is being rendered using css grid. Behind the scenes, these coordinates will be converted to grid classes. The grid will grow automatically. If a `c` is the "highest" letter used on the dashboard, it will have 3 columns, if a `e` is used on any tile, the dashboard will have 5 columns. The same applies with the rows.