วิธีสร้าง Zig Zag Layout (สลับซ้าย-ขวา) แบบ Responsive ด้วย CSS

Zig Zag Layout (หรือ Alternating Layout) คือรูปแบบจัดวางที่รูปภาพและข้อความสลับกันซ้าย-ขวา ใช้นิยมในหน้า Features, About, หรือ Storytelling ตัวอย่างนี้ใช้ Float Layout พร้อม Media Query ทำให้ซ้อนกันแนวตั้งบนมือถือ

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    div h1 { font-size: 40px; color: blueviolet; text-align: center; }
    div p { font-size: 18px; }
    .container { padding: 64px; }
    .row:after { content: ""; display: table; clear: both; }
    .width66 {
      float: left;
      width: 66.66666%;
      padding: 20px;
      height: 471px;
    }
    .width33 {
      float: left;
      width: 33.33333%;
      padding: 20px;
      height: 471px;
    }
    .large-font { font-size: 48px; }
    .xlarge-font { font-size: 64px; }
    .button {
      border: none; color: white; padding: 14px 28px;
      font-size: 16px; cursor: pointer; background-color: #4CAF50;
    }
    img { display: block; height: 250px; width: 250px; max-width: 100%; }
    @media screen and (max-width: 1000px) {
      .width66, .width33 { width: 100%; text-align: center; }
      img { margin: auto; }
    }
  </style>
</head>
<body>
  <h1 style="text-align:center">Responsive Zig Zag Layout Example</h1>
  <div class="width66"><h1>A Gypsy</h1><p>Lorem ipsum...</p></div>
  <div class="width33"><img src="https://i.picsum.photos/id/551/800/800.jpg"></div>
  <div class="width33"><img src="https://i.picsum.photos/id/211/800/800.jpg" alt="App"></div>
  <div class="width66"><h1>A cruise ship</h1><p>Lorem ipsum...</p></div>
  <div class="width66"><h1>Natures View</h1><p>Lorem ipsum...</p></div>
  <div class="width33"><img src="https://i.picsum.photos/id/251/800/800.jpg"></div>
  </div></div></body></html>

หลักการ Zig Zag Layout

• Row 1: Text 66% (ซ้าย) + Image 33% (ขวา)
• Row 2: Image 33% (ซ้าย) + Text 66% (ขวา) → สลับด้าน
• Row 3: Text 66% (ซ้าย) + Image 33% (ขวา) → กลับมาด้านเดิม

สร้าง Rhythm ให้ตาเคลื่อนที่ตามธรรมชาติ ลดความน่าเบื่อของการอ่าน

Modern Approach: CSS Grid (แนะนำ)

.zigzag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.zigzag > *:nth-child(odd) .content { order: 1; }
.zigzag > *:nth-child(odd) .image { order: 2; }
.zigzag > *:nth-child(even) .content { order: 2; }
.zigzag > *:nth-child(even) .image { order: 1; }

@media (max-width: 768px) {
  .zigzag { grid-template-columns: 1fr; }
  .zigzag > * { display: grid; }
  .zigzag > * > * { order: 0; } /* Reset order บน Mobile */
}

HTML Structure สำหรับ Grid Version

<div class="zigzag">
  <section>
    <div class="content"><h2>Title</h2><p>Text...</p></div>
    <div class="image"><img src="..." alt=""></div>
  </section>
  <section>
    <div class="image"><img src="..." alt=""></div>
    <div class="content"><h2>Title</h2><p>Text...</p></div>
  </section>
</div>

Flexbox Alternative

.zigzag-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.zigzag-flex > section {
  flex: 1 1 45%;
  display: flex;
  align-items: center;
}
.zigzag-flex > section:nth-child(even) {
  flex-direction: row-reverse;
}
@media (max-width: 768px) {
  .zigzag-flex > section { flex: 1 1 100%; }
  .zigzag-flex > section:nth-child(even) { flex-direction: column; }
}

Design Tips

• ใช้ Aspect Ratio คงที่สำหรับรูป (เช่น 4:3, 16:9) ด้วย aspect-ratio property
• เพิ่ม Whitespace พอให้หายใจ (Gap/Padding 2rem+)
• จำกัดความกว้างข้อความ max-width: 60ch เพื่อ Readability
• เพิ่ม Scroll Animation (Intersection Observer) ให้รายการ현ในทีละอัน