menu-btn

VISPAUI

 v1.0 Docs

Grid

VISPA-UI includes an expertly-crafted 14 varieties of Grid Utility Classes which can make your UI building experience effortless.

Grid Columns

To use the Grid component give the Grid class to the container which gives the container a display of Grid and to specify the columns use the grid-cols-# replacing the # with the number of columns you want in your grid.

1
2
3
4
5
6
7
8
9
10
              
              
<div class="grid grid-cols-4">
  <div>1</div>
  <div>2</div>
  ...
  <div>10</div>
</div>

Grid Rows

To use the Grid component give the Grid class to the container which gives the container a display of Grid and to specify the rows use the grid-rows-# replacing the # with the number of rows you want in your grid.

1
2
3
4
5
6
7
8
9
10
              
              
<div class="grid grid-rows-3">
  <div>1</div>
  <div>2</div>
  ...
  <div>10</div>
</div>