What are Tailwind CSS Grid layout classes, and how to create common Grid layouts?

Tailwind CSS Grid layout is implemented through grid-related classes, allowing developers to easily create two-dimensional grid layouts.

Basic Grid classes:

• grid: enable Grid layout
• inline-grid: enable inline Grid layout
• grid-cols-1: 1 column grid
• grid-cols-2: 2 column grid
• grid-cols-3: 3 column grid
• grid-cols-4: 4 column grid
• grid-cols-5: 5 column grid
• grid-cols-6: 6 column grid
• grid-cols-7: 7 column grid
• grid-cols-8: 8 column grid
• grid-cols-9: 9 column grid
• grid-cols-10: 10 column grid
• grid-cols-11: 11 column grid
• grid-cols-12: 12 column grid
• grid-cols-none: no specified columns

Row settings:

• grid-rows-1: 1 row grid
• grid-rows-2: 2 row grid
• grid-rows-3: 3 row grid
• grid-rows-4: 4 row grid
• grid-rows-5: 5 row grid
• grid-rows-6: 6 row grid
• grid-rows-none: no specified rows

Spacing control:

• gap-0: no spacing
• gap-1: 0.25rem (4px)
• gap-2: 0.5rem (8px)
• gap-3: 0.75rem (12px)
• gap-4: 1rem (16px)
• gap-5: 1.25rem (20px)
• gap-6: 1.5rem (24px)
• gap-8: 2rem (32px)
• gap-x-*: horizontal spacing
• gap-y-*: vertical spacing

Alignment methods:

• justify-items-start: horizontal start alignment
• justify-items-end: horizontal end alignment
• justify-items-center: horizontal center alignment
• justify-items-stretch: horizontal stretch (default)
• items-start: vertical start alignment
• items-end: vertical end alignment
• items-center: vertical center alignment
• items-stretch: vertical stretch (default)
• justify-start: grid container horizontal start alignment
• justify-end: grid container horizontal end alignment
• justify-center: grid container horizontal center alignment
• justify-between: grid container horizontal ends alignment
• justify-around: grid container horizontal equal spacing around
• content-start: multi-row vertical start alignment
• content-end: multi-row vertical end alignment
• content-center: multi-row vertical center alignment
• content-between: multi-row vertical ends alignment
• content-around: multi-row vertical equal spacing around

Span columns and rows:

• col-span-1: span 1 column
• col-span-2: span 2 columns
• col-span-3: span 3 columns
• col-span-full: span all columns
• col-start-1: start from column 1
• col-end-2: end at column 2
• row-span-1: span 1 row
• row-span-2: span 2 rows
• row-span-full: span all rows
• row-start-1: start from row 1
• row-end-2: end at row 2

Common layout examples:

• Basic grid:

  html
  <div class="grid grid-cols-3 gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
  </div>

• Responsive grid:

  html
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>

• Card layout:

  html
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
  </div>

• Complex layout:

  html
  <div class="grid grid-cols-4 grid-rows-3 gap-4">
    <div class="col-span-2 row-span-2">Header</div>
    <div>Sidebar</div>
    <div class="col-span-3 row-span-2">Content</div>
    <div>Footer</div>
  </div>

• Auto-fill:

  html
  <div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>

Best practices:

• Use semantic HTML structure
• Combine with responsive prefixes to create adaptive grids
• Reasonably use spacing to control layout
• Use column and row spanning to create complex layouts
• Test display effects on different screen sizes