Grid/Column

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>
Est hic et ut molestias ipsam. Tempora quos dolorum magnam illum praesentium. Quia molestiae ut eius ut modi enim occaecati.
Numquam vel qui dicta accusantium minima delectus harum. Non commodi cum amet dicta soluta et quam. Voluptatem quis reprehenderit aut at ducimus voluptate sequi.

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.