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)

  Positioning tiles
- [ 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.

 A good
match?
-------------

### What we do best

- All things Laravel
- Custom frontend components
- Building APIs
- AI-powered features
- Simplifying things
- Clean solutions
- Integrating services

### Not our cup of tea

- WordPress themes
- Cutting corners
- Free mockups to win a job
- "Just execute the briefing"

 In short: we'd like to be a **substantial part** of your project.

 [ Get in touch via email ](mailto:info@spatie.be?subject=A%20good%20match%21&body=Tell%20us%20as%20much%20as%20you%20can%20about%0A-%20your%20online%20project%0A-%20your%20planning%0A-%20your%20budget%0A-%20%E2%80%A6%0A%0AAnything%20that%20helps%20us%20to%20start%20straightforward%21)