Tiles and level

Tiles compose nested flex grids for dashboards and card matrices. Level aligns items horizontally (like a toolbar or stat row) with optional vertical centering—both are flexbox abstractions beyond basic columns.

Tiles structure

• tile is-ancestor — outer wrapper for a tile group
• tile is-parent — row of child tiles
• tile is-child — leaf tile; add is-4, is-6, etc. for proportional width

Level structure

• level — horizontal flex bar
• level-left / level-right — group items to each side
• level-item — centered content within a level section

Use level for nav toolbars and metadata rows; use tile when you need a Pinterest-style or admin dashboard grid without raw flex CSS.

Important interview questions and answers

1. Q: Tiles vs columns?
   A: Columns are the default page grid; tiles add nested proportional layouts optimized for card dashboards and multi-row compositions.
2. Q: When prefer level over is-flex?
   A: level bakes in horizontal distribution and vertical centering patterns common to headers and stat bars—less markup than hand-rolling flex utilities.

Self-check

1. Name the three tile roles in a nested tile layout.
2. What Bulma class groups items on the left and right of a horizontal bar?