Added template for grid columns on Group

[tabuna]

In the current version, the Group component is used to organize multiple fields in a single row divided into columns, and it supports two display modes:

1. Default — each column has an equal width.
2. AutoWidth — each column’s width is automatically determined based on its content size.

However, these modes can be limiting when building more customized interfaces, as they don't allow precise control over column widths (e.g., setting one field to take up 10% and another to take up 60% of the row).

To address this, I’ve added a new widthColumns() method, enabling CSS Grid support for columns. This method allows for flexible width configurations by passing values for the grid-template-columns CSS property. Example usage:

Group::make([
    Input::make('credit_card')
        ->mask('9999-9999-9999-9999')
        ->title('Credit card:')
        ->placeholder('Credit card number')
        ->help('Number is the long set of digits displayed across the front of your plastic card'),

    Input::make('currency')
        ->title('Currency dollar:')
        ->mask(['alias' => 'currency'])
        ->help('Examples: email, currency, decimal, integer, date, datetime, dd/mm/yyyy, etc.'),
])->widthColumns('2fr 1fr');

The widthColumns() method accepts a range of values:

• Percentages, e.g., 30%
• Pixels, e.g., 120px
• Fractional units, e.g., 2fr
• Other values such as max-content and auto

Warning

The number of specified values should not be less than the number of elements in the group.

These settings are applied only on desktop displays, while on mobile devices, each field will continue to display on a new row for better responsiveness.

This enhancement makes the Group component more versatile, allowing for customized column width distributions to create more tailored interfaces.

Conflict or Inconsistency

We already have a similar mechanism in the Split layout, where it’s possible to define a ratio:

Layout::split([
    Layout::view('first-view'),
    Layout::view('second-view'),
])->ratio('40/60');

I’m concerned that this new implementation may introduce inconsistency.

[agoalofalife]

I think we might rename method like gridWidthColumns or gridWidthColumns or widthColumns

[tabuna]

@agoalofalife I like your suggestion; I would prefer a shorter name, such as widthColumns.

[agoalofalife]

@tabuna Do this feature need in public documentation?