Grid Column Start / End

<div class="grid grid-cols-4 gap-4">
  <div class="bg-blue-100 p-4">1</div>
  <div class="col-span-2 bg-blue-300 p-4">Spans 2 columns</div>
  <div class="bg-blue-100 p-4">4</div>
</div>

<div class="grid grid-cols-6 gap-4">
  <div class="col-start-2 col-span-4 bg-green-200 p-4">Starts at column 2, spans 4 columns</div>
  <div class="col-start-1 col-end-3 bg-green-300 p-4">From column 1 to 3</div>
  <div class="col-end-7 col-span-2 bg-green-400 p-4">Spans 2 columns, ends at column 7</div>
  <div class="col-start-1 col-end-7 bg-green-500 p-4">Full width (columns 1-7)</div>
</div>

<!-- Magazine-style layout with varying column spans -->
<div class="grid grid-cols-12 gap-6">
  <!-- Header spanning all columns -->
  <header class="col-span-12 bg-blue-600 text-white p-6 rounded-lg">
    <h1 class="text-2xl font-bold">Magazine Layout</h1>
  </header>
  
  <!-- Main article spanning 8 columns -->
  <article class="col-span-12 md:col-span-8 bg-white p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-4">Main Feature Article</h2>
    <p class="mb-4">This is the main content area that spans 8 columns on medium screens and up.</p>
    <p>It takes full width on mobile for better readability on small screens.</p>
  </article>
  
  <!-- Sidebar spanning 4 columns -->
  <aside class="col-span-12 md:col-span-4 bg-gray-100 p-6 rounded-lg">
    <h3 class="font-bold mb-3">Related Content</h3>
    <ul class="space-y-2">
      <li>Sidebar item 1</li>
      <li>Sidebar item 2</li>
      <li>Sidebar item 3</li>
    </ul>
  </aside>
  
  <!-- Three feature boxes, each spanning 4 columns -->
  <div class="col-span-12 md:col-span-4 bg-blue-100 p-4 rounded-lg">
    <h3 class="font-bold mb-2">Feature 1</h3>
    <p>Each of these spans 4 columns on desktop.</p>
  </div>
  <div class="col-span-12 md:col-span-4 bg-blue-100 p-4 rounded-lg">
    <h3 class="font-bold mb-2">Feature 2</h3>
    <p>On mobile they stack vertically for better readability.</p>
  </div>
  <div class="col-span-12 md:col-span-4 bg-blue-100 p-4 rounded-lg">
    <h3 class="font-bold mb-2">Feature 3</h3>
    <p>This creates a responsive, magazine-style layout.</p>
  </div>
  
  <!-- Footer spanning full width -->
  <footer class="col-span-12 bg-gray-200 p-4 rounded-lg text-center">
    <p>Footer content</p>
  </footer>
</div>

<!-- Advanced grid layout with column spans and precise placement -->
<div class="grid grid-cols-6 gap-4 p-4 bg-gray-100 rounded-lg">
  <!-- Header area -->
  <div class="col-span-6 p-4 bg-blue-500 text-white rounded-lg">
    <h1 class="text-xl font-bold">Grid Layout Example</h1>
  </div>
  
  <!-- Sidebar -->
  <div class="col-span-6 sm:col-span-2 md:col-span-1 row-span-3 p-4 bg-blue-200 rounded-lg">
    <h2 class="font-bold mb-2">Sidebar</h2>
    <ul class="space-y-2 text-sm">
      <li>Navigation 1</li>
      <li>Navigation 2</li>
      <li>Navigation 3</li>
    </ul>
  </div>
  
  <!-- Main content area -->
  <div class="col-span-6 sm:col-span-4 md:col-span-4 row-span-2 p-4 bg-white rounded-lg shadow-md">
    <h2 class="text-lg font-bold mb-2">Main Content</h2>
    <p>This is the main content area that spans different numbers of columns based on screen size.</p>
  </div>
  
  <!-- Right sidebar -->
  <div class="col-span-6 sm:col-span-6 md:col-span-1 row-span-3 p-4 bg-blue-100 rounded-lg">
    <h2 class="font-bold mb-2">Right Bar</h2>
    <div class="space-y-3">
      <div class="p-2 bg-white rounded">Widget 1</div>
      <div class="p-2 bg-white rounded">Widget 2</div>
    </div>
  </div>
  
  <!-- Lower content blocks -->
  <div class="col-span-3 sm:col-span-2 md:col-span-2 p-4 bg-green-100 rounded-lg">
    <h3 class="font-bold">Section A</h3>
    <p class="text-sm">Content for section A.</p>
  </div>
  
  <div class="col-span-3 sm:col-span-2 md:col-span-2 p-4 bg-green-100 rounded-lg">
    <h3 class="font-bold">Section B</h3>
    <p class="text-sm">Content for section B.</p>
  </div>
  
  <!-- Footer -->
  <div class="col-span-6 p-4 bg-gray-200 rounded-lg text-center">
    <p>Footer content</p>
  </div>
</div>