แม่แบบ CSS: เลย์เอาต์สองคอลัมน์ (25% / 75%)

📝 การใช้งาน

แม่แบบนี้เหมาะสำหรับการแบ่งเลย์เอาต์เป็น 2 คอลัมน์ โดยคอลัมน์ซ้ายใช้พื้นที่ 25% และคอลัมน์ขวาใช้ 75% เหมาะกับการจัดหน้าแบบเมนูด้านข้าง + เนื้อหา

📘 คำอธิบาย

ใช้ display: flex; เพื่อจัดวางคอลัมน์ในแนวนอน flex: 0 0 25% กำหนดความกว้างของคอลัมน์ซ้าย และ flex: 1 ทำให้คอลัมน์ขวาใช้พื้นที่ที่เหลือทั้งหมด

✅ ตัวอย่าง

คอลัมน์ซ้าย (25%)

คอลัมน์ขวา (75%)

📄 โค้ด (บางส่วน)

<style>
.two-column-container {
  display: flex;
  gap: 1rem;
}
.left-column {
  flex: 0 0 25%;
  background-color: #f0f0f0;
  padding: 1rem;
}
.right-column {
  flex: 1;
  background-color: #ffffff;
  padding: 1rem;
  border-left: 1px solid #ccc;
}
</style>

<div class="two-column-container">
  <div class="left-column">คอลัมน์ซ้าย (25%)</div>
  <div class="right-column">คอลัมน์ขวา (75%)</div>
</div>

📦 โค้ด (HTML ทั้งหมด)

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>ตัวอย่างเลย์เอาต์สองคอลัมน์</title>
  <style>
    .two-column-container {
      display: flex;
      gap: 1rem;
    }
    .left-column {
      flex: 0 0 25%;
      background-color: #f0f0f0;
      padding: 1rem;
    }
    .right-column {
      flex: 1;
      background-color: #ffffff;
      padding: 1rem;
      border-left: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="two-column-container">
    <div class="left-column">คอลัมน์ซ้าย (25%)</div>
    <div class="right-column">คอลัมน์ขวา (75%)</div>
  </div>
</body>
</html>

คัดลอกแล้ว!

🧩 เคล็ดลับในการใช้งานและปรับแต่ง

เลย์เอาต์แบบสองคอลัมน์นี้เหมาะอย่างยิ่งสำหรับการแบ่งเนื้อหาออกเป็นส่วนซ้ายและขวา โดยเฉพาะการใช้ flex: 0 0 25% เพื่อกำหนดความกว้างของคอลัมน์ซ้ายให้คงที่ และให้คอลัมน์ขวาขยายได้ตามเนื้อหา เหมาะสำหรับโครงสร้างประเภทแถบด้านข้าง + เนื้อหาหลัก

หากต้องการให้แสดงผลได้ดีบนมือถือ แนะนำให้ใช้ media query เช่น @media (max-width: 768px) ร่วมกับ flex-direction: column; เพื่อเปลี่ยนรูปแบบให้เป็นแนวตั้ง ซึ่งจะช่วยให้แสดงผลบนหน้าจอขนาดเล็กได้อย่างเหมาะสม

ในด้านการจัดสไตล์ gap ช่วยเว้นระยะห่างระหว่างคอลัมน์ได้อย่างเป็นธรรมชาติ ง่ายต่อการจัดการมากกว่าการใช้ margin แบบกำหนดเอง และการใช้ border-left กับคอลัมน์ขวาจะช่วยสร้างเส้นแบ่งที่ชัดเจนระหว่างเนื้อหา

🔧 ข้อควรระวังในการใช้งาน

ในกรณีที่เนื้อหาในแต่ละคอลัมน์มีปริมาณไม่เท่ากัน อาจทำให้ความสูงของแต่ละคอลัมน์ไม่เท่ากัน การใช้ align-items: stretch; จะช่วยให้คอลัมน์ทั้งสองมีความสูงเท่ากัน ทำให้ดูเรียบร้อยและเป็นระเบียบมากขึ้น

โดยรวมแล้ว เทมเพลตนี้ถือเป็นโครงสร้างพื้นฐานที่มีประโยชน์มากสำหรับการสร้างเลย์เอาต์บนเว็บไซต์ สามารถนำไปปรับใช้ได้หลากหลายด้วยการปรับแต่ง CSS เพียงเล็กน้อย