Lingadzi House, City Centre, Lilongwe, Malawi
Mon - Fri : 07.30 AM - 16.30 PM
+265 (0)101 771 111
Responsively setting the number of grid columns
Responsively setting the number of grid columns

All layout components have a columns() method that you can use in a couple of different ways:

  • You can pass an integer like columns(2). This integer is the number of columns used on the lg breakpoint and higher. All smaller devices will have just 1 column.
  • You can pass an array, where the key is the breakpoint and the value is the number of columns. For example, columns(['md' => 2, 'xl' => 4]) will create a 2 column layout on medium devices, and a 4 column layout on extra large devices. The default breakpoint for smaller devices uses 1 column, unless you use a default array key.

Breakpoints (sm, md, lg, xl, 2xl) are defined by Tailwind, and can be found in the Tailwind documentation.