Grid/Column

You're browsing the documentation for an old version of MoonShine. Consider upgrading your project to MoonShine 2.x.

You can use moonshine::grid to arrange elements on the page 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>

Cum quo ipsa fugiat delectus. Omnis amet repudiandae non ipsum. Quibusdam mollitia placeat ipsa ullam accusantium mollitia. Error nihil eum distinctio corrupti ut.

Mollitia repellendus aut autem optio unde consequatur velit. Recusandae qui repudiandae officiis qui asperiores. Aut voluptatem accusantium deserunt. At corporis id beatae.

adaptiveColSpan - the number of columns that occupy the block when the screen size is up to 1280 pixels.
colSpan - the number of columns that occupy a block with a screen size of 1280px.