docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md

---
layout: post
title: "Metro UI CSS grid with Bulma tiles"
introduction: "Build a **Metro-UI-like grid in CSS** with the new `tile` element"
long_introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?<br>Thanks to Flexbox and the new [Bulma tiles](https://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element."
color: "info"
name: "Metro UI"
icon: "th-large"
---

Have you ever wanted to build a **Metro-UI-like grid in CSS**?
Thanks to Flexbox and the new [Bulma tiles](https://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element.

[![Metro UI grid tiles in CSS](/images/blog/metro-ui-css-grid-tiles.png)](https://bulma.io/documentation/layout/tiles/)

Check out the [documentation](https://bulma.io/documentation/layout/tiles/)!
Move docs to bulma repo (#299) * Add package files whitelist * Add flex shrink * Add flex shrink * Add docs config * Fix flex shrink * Fix hero pages * Add docs folder 2016-09-11 12:00:49 +01:00			`---`
			`layout: post`
			`title: "Metro UI CSS grid with Bulma tiles"`
Init migrating blog post 2018-04-11 18:58:11 +01:00			introduction: "Build a Metro-UI-like grid in CSS with the new `tile` element"
			long_introduction: "Have you ever wanted to build a Metro-UI-like grid in CSS?<br>Thanks to Flexbox and the new [Bulma tiles](https://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element."
Add article image 2017-07-29 14:38:45 +01:00			`color: "info"`
			`name: "Metro UI"`
			`icon: "th-large"`
Move docs to bulma repo (#299) * Add package files whitelist * Add flex shrink * Add flex shrink * Add docs config * Fix flex shrink * Fix hero pages * Add docs folder 2016-09-11 12:00:49 +01:00			`---`

Add new favicons 2016-09-24 17:18:56 +01:00			`Have you ever wanted to build a Metro-UI-like grid in CSS?`
Use https for Bulma 2017-10-16 13:23:57 +01:00			Thanks to Flexbox and the new [Bulma tiles](https://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element.
Move docs to bulma repo (#299) * Add package files whitelist * Add flex shrink * Add flex shrink * Add docs config * Fix flex shrink * Fix hero pages * Add docs folder 2016-09-11 12:00:49 +01:00
Use https for Bulma 2017-10-16 13:23:57 +01:00			`[![Metro UI grid tiles in CSS](/images/blog/metro-ui-css-grid-tiles.png)](https://bulma.io/documentation/layout/tiles/)`
Move docs to bulma repo (#299) * Add package files whitelist * Add flex shrink * Add flex shrink * Add docs config * Fix flex shrink * Fix hero pages * Add docs folder 2016-09-11 12:00:49 +01:00
Use https for Bulma 2017-10-16 13:23:57 +01:00			`Check out the [documentation](https://bulma.io/documentation/layout/tiles/)!`