<h2 class="text-h4 mb-4">Grid Template Examples</h2>

  <!-- Responsive grid -->
  <h3 class="text-h5 mb-3">Responsive Grid Template</h3>
  <div class="d-grid grid-cols-2 grid-cols-md-3 grid-cols-lg-4 ga-4 mb-6">
    <v-card v-for="n in 16" :key="n" class="pa-2" color="primary">
      <v-card-text class="text-center">{{ n }}</v-card-text>
    </v-card>
  </div>

  <!-- Grid item spanning multiple columns -->
  <h3 class="text-h5 mb-3">Grid Column Spanning</h3>
  <div class="d-grid grid-cols-9 ga-4 mb-8">
    <v-card class="col-span-3 pa-4" color="primary">
      <v-card-title>Spans 3 Columns</v-card-title>
      <v-card-text>Uses .col-span-3 class</v-card-text>
    </v-card>
    <v-card class="col-span-6 pa-4" color="secondary">
      <v-card-title>Spans 6 Columns</v-card-title>
      <v-card-text>Uses .col-span-6 class</v-card-text>
    </v-card>
  </div>

  <h2 class="text-h4 mb-4">Auto Columns Examples</h2>

  <!-- Auto columns with dynamic content -->
  <div class="d-grid grid-rows-2 auto-cols-auto ga-4 mb-8" style="grid-auto-flow: column;">
    <v-card class="pa-4">
      <v-card-title>Auto Width</v-card-title>
      <v-card-text>Short</v-card-text>
    </v-card>
    <v-card class="pa-4">
      <v-card-title>Wider Content Here</v-card-title>
      <v-card-text>This column will be wider due to content</v-card-text>
    </v-card>
    <v-card class="pa-4">
      <v-card-title>Medium</v-card-title>
      <v-card-text>Medium content length</v-card-text>
    </v-card>
    <v-card class="pa-4">
      <v-card-title>Very Long Title Goes Here</v-card-title>
      <v-card-text>This will create the widest column</v-card-text>
    </v-card>
  </div>

  <!-- Auto columns with min-content -->
  <div class="d-grid grid-rows-1 auto-cols-min ga-4 mb-8" style="grid-auto-flow: column;">
    <v-card class="pa-4">
      <v-card-title>Min</v-card-title>
    </v-card>
    <v-card class="pa-4">
      <v-card-title>Compressed</v-card-title>
    </v-card>
    <v-card class="pa-4">
      <v-card-title>Tight</v-card-title>
    </v-card>
  </div>

  <!-- Auto columns with fractional sizing -->
  <div class="d-grid grid-rows-1 auto-cols-fr ga-4 mb-8" style="grid-auto-flow: column; width: 100%;">
    <v-card class="pa-4">
      <v-card-title>Equal Width</v-card-title>
      <v-card-text>1/4 width</v-card-text>
    </v-card>
    <v-card class="pa-4">
      <v-card-title>Equal Width</v-card-title>
      <v-card-text>1/4 width</v-card-text>
    </v-card>
    <v-card class="pa-4">
      <v-card-title>Equal Width</v-card-title>
      <v-card-text>1/4 width</v-card-text>
    </v-card>
    <v-card class="pa-4">
      <v-card-title>Equal Width</v-card-title>
      <v-card-text>1/4 width</v-card-text>
    </v-card>
  </div>

  <h2 class="text-h4 mb-4">Auto-Fill Examples</h2>

  <!-- Auto-fill columns - responsive card layout -->
  <h3 class="text-h5 mb-3">Auto-Fill Columns</h3>
  <div class="d-grid grid-cols-auto-fill-250 ga-4 mb-6">
    <v-card v-for="n in 12" :key="`fill-${n}`" class="pa-4" color="primary">
      <v-card-title>Card {{ n }}</v-card-title>
      <v-card-text>
        Auto-fill creates as many 250px columns as fit in the container.
        {{ n % 3 === 0 ? 'This card has extra content to show how auto-fill handles varying content lengths gracefully.' : 'Short content.' }}
      </v-card-text>
    </v-card>
  </div>

  <!-- Auto-fill vs Auto-fit comparison -->
  <h3 class="text-h5 mb-3">Auto-Fill vs Auto-Fit Comparison</h3>
  <div class="mb-4">
    <h4 class="text-h6 mb-2">Auto-Fill (maintains empty columns)</h4>
    <div class="d-grid grid-cols-auto-fill-200 ga-4 mb-4">
      <v-card v-for="n in 4" :key="`fill-demo-${n}`" class="pa-4" color="primary">
        <v-card-title>Fill {{ n }}</v-card-title>
        <v-card-text>200px min width</v-card-text>
      </v-card>
    </div>

    <h4 class="text-h6 mb-2">Auto-Fit (stretches to fill space)</h4>
    <div class="d-grid grid-cols-auto-fit-200 ga-4 mb-6">
      <v-card v-for="n in 4" :key="`fit-demo-${n}`" class="pa-4" color="secondary">
        <v-card-title>Fit {{ n }}</v-card-title>
        <v-card-text>200px min, stretches</v-card-text>
      </v-card>
    </div>
  </div>

  <!-- Auto-fill rows - vertical layout -->
  <h3 class="text-h5 mb-3">Auto-Fill Rows</h3>
  <div class="d-flex ga-6">

    <!-- First column with auto-fill rows -->
    <div class="flex-1-0">
      <h4 class="text-h6 mb-2">Auto-Fill Rows (150px min)</h4>
      <div class="d-grid grid-rows-auto-fill-150 ga-2 " style="height: 500px;">
        <v-card v-for="n in 2" :key="`row-fill-${n}`" class="pa-3" color="primary">
          <v-card-title class="text-subtitle-1">Row {{ n }}</v-card-title>
          <v-card-text class="text-body-2">
            Auto-fill creates 2 rows (150px each + gap) that fit in 400px container
          </v-card-text>
        </v-card>
      </div>
    </div>

    <!-- Second column with auto-fit rows -->
    <div class="flex-1-0">
      <h4 class="text-h6 mb-2">Auto-Fit Rows (100px min)</h4>
      <div class="d-grid grid-rows-auto-fit-100 ga-2 " style="height: 500px;">
        <v-card v-for="n in 3" :key="`row-fit-${n}`" class="pa-3" color="primary">
          <v-card-title class="text-subtitle-1">Fit {{ n }}</v-card-title>
          <v-card-text class="text-body-2">Auto-fit stretches these 3 rows to fill all 400px</v-card-text>
        </v-card>
      </div>
    </div>
  </div>

  <!-- Responsive auto-fill -->
  <h3 class="text-h5 mb-3 mt-8">Responsive Auto-Fill</h3>
  <div class="d-grid grid-cols-auto-fill-150 grid-cols-sm-auto-fill-200 grid-cols-md-auto-fill-250 grid-cols-lg-auto-fill-300 ga-4 mb-6">
    <v-card v-for="n in 16" :key="`responsive-${n}`" class="pa-4" color="primary">
      <v-card-title>Item {{ n }}</v-card-title>
      <v-card-text>
        Responsive: 150px on XS, 200px on SM, 250px on MD, 300px on LG+
      </v-card-text>
    </v-card>
  </div>