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>

<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>

Non est tempore et molestiae ea labore et. Est sequi odit at aut facilis facilis voluptatibus.

Est soluta autem consequatur. Voluptatem quis debitis et velit unde. Aliquam sed amet distinctio laborum. Consequatur dicta sed et laboriosam laboriosam.

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.