1. Home
  2. Components
  3. Layout
  4. Grid
Getting StartedIntroduction SOONInstallation SOONChange log SOONRoadmap SOON
Components
Layout
ContainerFlex SOONGrid SOONSticky SOONSeparator SOONAspect Ratio SOONVisually Hidden SOON
Overlays
DialogPopover SOONTooltipDropdown Menu SOONContext Menu SOONHover Card SOON
Navigation
Link SOONNavigation Menu SOONBreadcrumbs SOONPagination SOONStepper SOON
Disclosure
Collapsible SOONAccordion SOONTabs SOON
Typography
H1 SOONH2 SOONH3 SOONH4 SOONH5 SOONH6 SOONP SOONSpan SOONEm SOONI SOONStrong SOONB SOONQ SOONBlockquote SOONUl SOONOl SOONKbd SOONCode SOONTable of Contents SOON
Media
Icon SOONAvatar SOONAvatar Group SOONImage SOONVideo SOON
Notifications
Notification SOONNotification Panel SOONToast SOONAlert SOON
Status
Spinner SOONProgress Bar SOON
Buttons
Button SOONBurger Button SOONButton Group SOON
Data Display
Article Preview SOONBadge SOONCard SOONCommand Line SOONTable SOONTag SOONTag Group SOONTag Picker SOONTestimonial SOONProduct Tile SOONSkeleton SOONStatistic SOON
Data Entry
Address Input SOONCheckbox SOONCalendar Input SOONCalendar Range Input SOONColor Picker SOONCurrency Input SOONCredit Card Input SOONDate Input SOONDate Picker SOONDate Range Input SOONDate Range Picker SOONFieldset SOONFile Input SOONFile Dropzone SOONFile Picker SOONLabel SOONPin Input SOONPhone Number Input SOONRadio Button SOONRadio Group SOONRange Slider SOONRating SOONSearch Input SOONSwitch SOONSegmented Control SOONSelect SOONSlider SOONText Input SOONTextarea SOONToggle SOONToggle Group SOONURL Input SOON
Forms
TBD SOON

Grid

Component for creating bidimensional grid layouts.

Features

Parts and their API

Grid

Component for creating bidimensional grid layouts.

Props

PropTypeDefaultDescription
inlinebooleanfalseWhether the grid is inline or not.
cols"number"1The number of columns.
rows"number"1The number of rows.
justify'start' | 'center' | 'end' | 'between''start'The horizontal alignment of the grid.
align'start' | 'center' | 'end' | 'stretch''start'The vertical alignment of the grid.
gapX0 to 200The horizontal gap between the grid items.
gapY0 to 200The vertical gap between the grid items.

Notes

If you set inline, justify has no meaning because the <Grid /> has the least width possible.

Setting align, only has meaning if the <Grid /> has a height. Otherwise it will have the least height possible.

If you set justify="stretch", the children shouldn't have a fixed width. Otherwise they won't stretch.

If you set align="stretch", the children shouldn't have a fixed height. Otherwise they won't stretch.

Setting justify="stretch" has the same effect as setting w-full on all the children (assuming flow="row").

Setting align="stretch" has the same effect as setting h-full on all the children (assuming flow="row").

Accessibility

Changing visual order creates a disconnect between content and presentation and is, therefore, bad for accessibility. For this reason, I've ommitted grid-auto-flow:row dense and grid-auto-flow: column dense.

Usage

GridExample.tsx
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
<Grid cols="3" rows="3" justify="stretch" align="stretch" gapX="6" gapY="6" className="mt-4 h-96 rounded-md bg-slate-200 p-4">
	<div className="flex items-center justify-center rounded-sm bg-slate-600 text-white">1</div>
	<div className="flex items-center justify-center rounded-sm bg-slate-600 text-white">2</div>
	<div className="flex items-center justify-center rounded-sm bg-slate-600 text-white">3</div>
	<div className="flex items-center justify-center rounded-sm bg-slate-600 text-white">4</div>
	<div className="flex items-center justify-center rounded-sm bg-slate-600 text-white">5</div>
	<div className="flex items-center justify-center rounded-sm bg-slate-600 text-white">6</div>
	<div className="flex items-center justify-center rounded-sm bg-slate-600 text-white">7</div>
	<div className="flex items-center justify-center rounded-sm bg-slate-600 text-white">8</div>
	<div className="flex items-center justify-center rounded-sm bg-slate-600 text-white">9</div>
</Grid>
<Grid cols="3" rows="3" justify="start" align="start" gapX="6" gapY="6" className="mt-4 h-96 rounded-md bg-slate-200 p-4">
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">1</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">2</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">3</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">4</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">5</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">6</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">7</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">8</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">9</div>
</Grid>
<Grid cols="3" rows="3" justify="center" align="start" gapX="6" gapY="6" className="mt-4 h-96 rounded-md bg-slate-200 p-4">
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">1</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">2</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">3</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">4</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">5</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">6</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">7</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">8</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">9</div>
</Grid>
<Grid cols="3" rows="3" justify="end" align="start" gapX="6" gapY="6" className="mt-4 h-96 rounded-md bg-slate-200 p-4">
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">1</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">2</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">3</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">4</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">5</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">6</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">7</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">8</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">9</div>
</Grid>
<Grid cols="3" rows="3" justify="start" align="center" gapX="6" gapY="6" className="mt-4 h-96 rounded-md bg-slate-200 p-4">
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">1</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">2</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">3</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">4</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">5</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">6</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">7</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">8</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">9</div>
</Grid>
<Grid cols="3" rows="3" justify="center" align="center" gapX="6" gapY="6" className="mt-4 h-96 rounded-md bg-slate-200 p-4">
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">1</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">2</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">3</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">4</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">5</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">6</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">7</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">8</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">9</div>
</Grid>
<Grid cols="3" rows="3" justify="end" align="center" gapX="6" gapY="6" className="mt-4 h-96 rounded-md bg-slate-200 p-4">
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">1</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">2</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">3</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">4</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">5</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">6</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">7</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">8</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">9</div>
</Grid>
<Grid cols="3" rows="3" justify="start" align="end" gapX="6" gapY="6" className="mt-4 h-96 rounded-md bg-slate-200 p-4">
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">1</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">2</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">3</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">4</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">5</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">6</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">7</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">8</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">9</div>
</Grid>
<Grid cols="3" rows="3" justify="center" align="end" gapX="6" gapY="6" className="mt-4 h-96 rounded-md bg-slate-200 p-4">
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">1</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">2</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">3</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">4</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">5</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">6</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">7</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">8</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">9</div>
</Grid>
<Grid cols="3" rows="3" justify="end" align="end" gapX="6" gapY="6" className="mt-4 h-96 rounded-md bg-slate-200 p-4">
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">1</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">2</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">3</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">4</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">5</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">6</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">7</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">8</div>
	<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-slate-600 text-white">9</div>
</Grid>

Here's the <Grid /> component in action.

1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

Source

Get all-access