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); }