Components: Grid

Allows you to render components within a CSS grid system, which enables responsive layouts.

use Hiker\Components\Grid\Grid;
use Hiker\Components\Grid\Area;

Grid::make()
    // Configuration of the grid areas
    ->area('main', function (Area $area) {
        $area->columns(1, 8)->row(2);
        $area->mobile()->columns(1, 12);
    })
    ->area('side', function (Area $area) {
        $area->columns(9, 12);
        $area->mobile()->columns(1, 12);
    })
    // Definition of the components to render within the areas
    ->main([
        DataList::make(),
    ])
    ->side([
        Section::make(),
    ])

Grids can react and adapt to the browser width. To make configuration easy, we define breakpoints at which the areas shift, as name => width key-value pairs. The default breakpoints that ship with Hiker are:

[
    'desktop' => null,
    'tablet' => 1024, 
    'mobile' => 620,
]

These defaults are customizable through the GridConfiguration singleton. In your HikerServiceProvider file, add the following:

use Hiker\Components\Grid\GridConfiguration;

app(GridConfiguration::class)->setBreakpoints([
    'tv' => 2048,
    'desktop' => 1024,
    'mobile' => 620,
    'watch' => 200,
]);

// or to not override the existing breakpoints but just add one
app(GridConfiguration::class)->breakpoint('watch', 200);

Areas are named zones within your grid. You can configure an area to display on a certain row, and between certain columns between 1 and 12 for each breakpoint you have defined.

In the following example, the "main" area will go from columns 1 to 8 on desktop (default breakpoint) and shift to full-width (12 columns) below the tablet breakpoint.

use Hiker\Components\Grid\Grid;
use Hiker\Components\Grid\Area;

Grid::make()
    ->area('main', function (Area $area) {
        $area->columns(1, 8);
        $area->tablet()->columns(1, 12);
    });

In the next example, we define two areas, "main" and "side". On desktop, they are displayed side-by-side, but on tablet and below, they shift to full-width and the side area is displayed above the main area (rows 1 and 2 respectively).

use Hiker\Components\Grid\Grid;
use Hiker\Components\Grid\Area;

Grid::make()
    ->area('main', function (Area $area) {
        $area->columns(1, 8);
        $area->tablet()->columns(1, 12)->row(2);
    })
    ->area('side', function (Area $area) {
        $area->columns(9, 12);
        $area->tablet()->columns(1, 12)->row(1);
    });

setBreakpoints(array $breakpoints): static

Override all existing default breakpoints for the current Grid component instance.

Grid::make()
    ->setBreakpoints([
        'tv' => 2048,
        'desktop' => 1024,
        'mobile' => 620,
        'watch' => 200,
    ]);

---

breakpoint(string $name, int $maxWidth): static

Configure a new breakpoint for the current Grid component instance.

Grid::make()
    ->breakpoint('tv', 2048)

---

area(string $name, Closure $callback): static

Configures an area. The callback is given an instance of the Area class.

use Hiker\Components\Grid\Grid;
use Hiker\Components\Grid\Area;

Grid::make()
    ->area('main', function (Area $area) {
        /* Configure your area */
    });

The Grid component extends the base component and inherits all of its methods.

It also inherits the methods from the following traits:

• HasComponents