GridResponsive.php

<?php

namespace Drupal\views\Plugin\views\style;

use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\StringTranslation\TranslatableMarkup;
use Drupal\views\Attribute\ViewsStyle;

/**
 * Style plugin to render each item in a responsive grid cell.
 *
 * @ingroup views_style_plugins
 */
class GridResponsive extends StylePluginBase {
    
    /**
     * {@inheritdoc}
     */
    protected $usesRowPlugin = TRUE;
    
    /**
     * {@inheritdoc}
     */
    protected function defineOptions() {
        $options = parent::defineOptions();
        $options['columns'] = [
            'default' => '4',
        ];
        $options['cell_min_width'] = [
            'default' => '100',
        ];
        $options['grid_gutter'] = [
            'default' => '10',
        ];
        $options['alignment'] = [
            'default' => 'horizontal',
        ];
        return $options;
    }
    
    /**
     * {@inheritdoc}
     */
    public function buildOptionsForm(&$form, FormStateInterface $form_state) {
        parent::buildOptionsForm($form, $form_state);
        $form['columns'] = [
            '#type' => 'number',
            '#title' => $this->t('Maximum number of columns'),
            '#attributes' => [
                'style' => 'width: 6em;',
            ],
            '#description' => $this->t('The maximum number of columns that will be displayed within the grid.'),
            '#default_value' => $this->options['columns'],
            '#required' => TRUE,
            '#min' => 1,
        ];
        $form['cell_min_width'] = [
            '#type' => 'number',
            '#title' => $this->t('Minimum grid cell width'),
            '#field_suffix' => 'px',
            '#attributes' => [
                'style' => 'width: 6em;',
            ],
            '#description' => $this->t('The minimum width of the grid cells. If the grid container becomes narrow, the grid cells will reflow onto the next row as needed.'),
            '#default_value' => $this->options['cell_min_width'],
            '#required' => TRUE,
            '#min' => 1,
        ];
        $form['grid_gutter'] = [
            '#type' => 'number',
            '#title' => $this->t('Grid gutter spacing'),
            '#field_suffix' => 'px',
            '#attributes' => [
                'style' => 'width: 6em;',
            ],
            '#description' => $this->t('The spacing between the grid cells.'),
            '#default_value' => $this->options['grid_gutter'],
            '#required' => TRUE,
            '#min' => 0,
        ];
        $form['alignment'] = [
            '#type' => 'radios',
            '#title' => $this->t('Alignment'),
            '#options' => [
                'horizontal' => $this->t('Horizontal'),
                'vertical' => $this->t('Vertical'),
            ],
            '#default_value' => $this->options['alignment'],
            '#description' => $this->t('Horizontal alignment will place items starting in the upper left and moving right. Vertical alignment will place items starting in the upper left and moving down.'),
        ];
    }

}