Bulma Grid Playground

Try out the Bulma 2D Grid

Smart Grid #

You can use this example to try out the Smart Grid with different column widths and different gap values.

Minimum Column Width

Property Value

HTML <div class="grid">

Cell 1

Cell 2

Cell 3

Cell 4

Cell 5

Cell 6

Cell 7

Cell 8

Cell 9

Cell 10

Cell 11

Cell 12

Cell 13

Cell 14

Cell 15

Cell 16

Cell 17

Cell 18

Cell 19

Cell 20

Cell 21

Cell 22

Cell 23

Cell 24

Fixed Grid #

You can use these controls to try out the Fixed Grid with different columns counts.

Column Count

HTML <div class="fixed-grid">

Use the handle on the right side to change the container's width: 1200