วิธีสร้าง Blog Layout แบบ Responsive ด้วย CSS

Blog Layout ต้องมีโครงสร้างชัดเจน: Header/Navigation, Main Content Area (Posts), Sidebar (Optional), และ Footer ตัวอย่างนี้สร้าง Layout แบบเดี่ยว (Single Column) พร้อม Navigation Bar แบบ Fixed และ Footer แบบ Fixed Bottom

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

<!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; }
    nav {
      font-size: 20px;
      background-color: rgb(136, 22, 182);
      color: #cccccc;
      height: 75px;
    }
    ul { position: fixed; right: 10px; }
    ul li {
      display: inline;
      padding-right: 30px;
      font-weight: 500;
      color: rgb(251, 255, 0);
    }
    .logo {
      width: 75%;
      margin-left: auto;
      margin-right: auto;
      color: white;
      float: left;
      font-size: 30px;
      padding-left: 20px;
      padding-top: 20px;
    }
    .blog {
      margin-top: 20px;
      width: 75%;
      margin-left: auto;
      margin-right: auto;
      height: 400px;
    }
    .post { margin-top: 20px; float: left; }
    .blogHeader { font-size: 36px; margin-bottom: 20px; }
    .links { float: right; }
    .links li { color: black; }
    footer {
      color: white;
      position: fixed;
      width: 100%;
      bottom: 0;
      margin-left: auto;
      margin-right: auto;
      font-size: 30px;
      height: 100px;
      padding: 20px;
      background-color: rgb(9, 141, 101);
      text-align: center;
    }
  </style>
</head>
<body>
  <nav>
    <div class="logo"> ↷ LOGO ↶ </div>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
  <div class="blog">
    <div class="post">
      <div class="blogHeader"><h1>Blog Heading</h1></div>
      <div class="blog-body">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt non neque eos eaque veritatis praesentium.</p>
      </div>
    </div>
    <div class="links">
      <ul>
        <li>BLOG 2</li>
        <li>BLOG 3</li>
      </ul>
    </div>
  </div>
  <footer>Copyright ©</footer>
</body>
</html>

โครงสร้าง Layout

• Navigation Bar - สูง 75px พื้นหลังสีม่วง Logo ซ้าย เมนูขวา (Fixed Position)
• .blog Container - กว้าง 75% อยู่กึ่งกลาง Margin-top 20px หลีกเลี่ยง Nav
• .post - บทความหลัก Float ซ้าย
• .links (Sidebar) - ลิงก์บทความอื่น Float ขวา
• Footer - Fixed Bottom สีเขียว คงที่ตลอด

ปัญหาของตัวอย่างนี้ (และวิธีแก้)

Modern Blog Layout ด้วย CSS Grid

.blog-layout {
  display: grid;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "sidebar"
    "footer";
  grid-template-rows: auto auto 1fr auto auto;
  min-height: 100vh;
}
@media (min-width: 768px) {
  .blog-layout {
    grid-template-areas:
      "header header"
      "nav nav"
      "main sidebar"
      "footer footer";
    grid-template-columns: 1fr 300px;
  }
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: sidebar; }
footer { grid-area: footer; }

Responsive Typography

:root {
  --font-size-base: 1rem;
  --line-height: 1.6;
}
@media (min-width: 768px) {
  :root { --font-size-base: 1.125rem; }
}
body { font-size: var(--font-size-base); line-height: var(--line-height); }