Grid Layouts

<div className="grid grid-cols-12 gap-4">
  <div className="col-span-3">Sidebar</div>
  <div className="col-span-9">Main Content</div>
</div>

<div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>

<div className="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
  <div className="break-inside-avoid">Content 1</div>
  <div className="break-inside-avoid">Content 2</div>
  <div className="break-inside-avoid">Content 3</div>
</div>

<div className="grid grid-cols-4 grid-rows-3 gap-4" style={{
  gridTemplateAreas: 
    "'header header header tools'"
    "'nav main main sidebar'"
    "'footer footer footer footer'"
}}>
  <div style={{ gridArea: 'header' }}>Header</div>
  <div style={{ gridArea: 'nav' }}>Navigation</div>
  <div style={{ gridArea: 'main' }}>Main Content</div>
  <div style={{ gridArea: 'sidebar' }}>Sidebar</div>
  <div style={{ gridArea: 'tools' }}>Tools</div>
  <div style={{ gridArea: 'footer' }}>Footer</div>
</div>