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>
Enim voluptas molestiae esse aut ipsum. Iure nam asperiores placeat ullam ut dicta eaque. Qui quae excepturi natus voluptatibus.
Occaecati quo aliquid quia quos officiis aut excepturi. Sapiente magni adipisci quos. Sint quidem quia reprehenderit magnam rem repudiandae. Velit animi et quae.
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.