Simple Grid

Use the following code snippet in order to create simple grid layouts.

public function tab1() {
	$this->layout = new stdClass();

	$this->layout->scroll[] = $this->getComponentText('Simple grid', [], [
	    'padding' => '10 15 10 15',
	    'font-size' => '19',
    ]);

	$this->getSimpleGrid();

    $this->layout->overlay[] = $this->components->uiKitFloatingButtons([
        [
            'icon' => 'layouts-exit-icon.png',
            'onclick' => $this->getOnclickRoute('Controller/Default', false)
        ],
    ], true);

	return $this->layout;
}

public function getSimpleGrid() {

    $elements_per_row = 3;
    $chunks = array_chunk($this->getElements(4), $elements_per_row);

    foreach ($chunks as $row_items) {
        $items = [];

        foreach ($row_items as $i => $row_item) {
            $items[] = $this->getComponentColumn([
                $this->getComponentImage($row_item['image'], [], [
                    'margin' => '0 2 0 0'
                ])
            ], [], [
                'width' => 100 / $elements_per_row . '%',
            ]);
        }

        $this->layout->scroll[] = $this->getComponentRow($items, [], [
            'width' => 'auto',
            'vertical-align' => 'middle',
            'margin' => '0 15 4 15',
        ]);
    }

}

public function getElements( $count = 4 ) {

    $elements = [
        [
            'title' => 'Element 1',
            'description' => 'Lorem Ipsum is simply dummy text',
            'image' => 'image-1.jpg'
        ],
        [
            'title' => 'Element 2',
            'description' => 'Lorem Ipsum is simply dummy text',
            'image' => 'image-2.jpg'
        ],
        [
            'title' => 'Element 3',
            'description' => 'Lorem Ipsum is simply dummy text',
            'image' => 'image-3.jpg'
        ],
        [
            'title' => 'Element 4',
            'description' => 'Lorem Ipsum is simply dummy text',
            'image' => 'image-4.jpg'
        ],
    ];

    return array_slice($elements, 0, $count);
}