Grid
Grid
<CGrid />
CGrid has a default of 1 column 
<template>
    <CGrid>
        <!-- Content goes here -->
    </CGrid>
</template>
Layout
Use the layout prop and set to left-wide left-wider left-widest or right-wide right-wider right-widest
Layout only have 2 columns 
<template>
    <CGrid layout="left-wide">
        <!-- Content goes here -->
    </CGrid>

    <CGrid layout="left-wider">
        <!-- Content goes here -->
    </CGrid>

    <CGrid layout="left-widest">
        <!-- Content goes here -->
    </CGrid>

    <CGrid layout="right-wide">
        <!-- Content goes here -->
    </CGrid>

    <CGrid layout="right-wider">
        <!-- Content goes here -->
    </CGrid>
    
    <CGrid layout="right-widest">
        <!-- Content goes here -->
    </CGrid>
</template>
Columns and Divider
Use the :columns prop to set the number of columns.
Use the hasDivider prop to add vertical divider. 
<template>
    <CGrid :columns="3" hasDivider>
        <div class="first:pl-0">
            <!-- Content goes here -->
        </div>
        <div>
            <!-- Content goes here -->
        </div>
        <div class="last:pr-0">
            <!-- Content goes here -->
        </div>
    </CGrid>
</template>
Nested Grid
Nested grid works with :columns and layout prop for more complex layout. 
<template>
    <CGrid layout="left-widest" hasDivider>
        <CGrid :columns="2">
            <!-- Content goes here -->
        </CGrid>
        <div class="last:pr-0">
            <!-- Content goes here -->
        </div>
    <CGrid>
</template>

© 2025 Application Name. All Rights Reserved.