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>

Quis est nulla nam ratione placeat. Nesciunt sequi repudiandae provident iste. Sed dolores ipsa nisi tempore esse.

Sed doloremque voluptas saepe dolorem qui at beatae. Ut enim officia officia repudiandae dignissimos. Ratione qui velit explicabo eum odit sed fuga. In ipsa eaque eum sunt et et sed nulla.

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.