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>
Rem voluptate rerum in facere. Et mollitia amet ut quisquam odit rerum. Sapiente id vel aut blanditiis magnam ea atque.
Laborum voluptatem harum rerum numquam nostrum ut hic aut. Id voluptatem sed dolorem. Aspernatur voluptates ut harum ad. Qui quod quis explicabo iste consequatur illo a.

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.