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

---
layout: post
title: "Metro UI CSS grid with Bulma tiles"
introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?<br>Thanks to Flexbox and the new [Bulma tiles](http://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](http://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)](http://bulma.io/documentation/layout/tiles/)

Check out the [documentation](http://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 11:00:49 +00:00			`---`
			`layout: post`
			`title: "Metro UI CSS grid with Bulma tiles"`
Add gap 2017-08-14 18:12:07 +00:00			introduction: "Have you ever wanted to build a Metro-UI-like grid in CSS?<br>Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element."
Add article image 2017-07-29 13:38:45 +00: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 11:00:49 +00:00			`---`

Add new favicons 2016-09-24 16:18:56 +00:00			`Have you ever wanted to build a Metro-UI-like grid in CSS?`
Add gap 2017-08-14 18:12:07 +00:00			Thanks to Flexbox and the new [Bulma tiles](http://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 11:00:49 +00:00
Add gap 2017-08-14 18:12:07 +00:00			`[![Metro UI grid tiles in CSS](/images/blog/metro-ui-css-grid-tiles.png)](http://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 11:00:49 +00:00
Add gap 2017-08-14 18:12:07 +00:00			`Check out the [documentation](http://bulma.io/documentation/layout/tiles/)!`