To arrange elements on the page, you can use moonshine::grid
and moonshine::column components.
The grid consists of 12 columns.
<x-moonshine::grid> <x-moonshine::column adaptiveColSpan="6" colSpan="6"> {{ fake()->text() }} </x-moonshine::column> <x-moonshine::column adaptiveColSpan="6" colSpan="6"> {{ fake()->text() }} </x-moonshine::column></x-moonshine::grid>
Rerum tempora facilis omnis. Voluptatum occaecati voluptatem illum sit ut aut.
Est reiciendis consequatur facilis incidunt. Minus excepturi voluptatum aut similique beatae. Quia aut et incidunt natus magni.
adaptiveColSpan - the number of columns that the block occupies for screen sizes up to 1280px.
colSpan - the number of columns that the block occupies for screen sizes of 1280px or more.