Bài 28: Thiết kế bố cục nội dung + sidebar

Sau khi đã tạo xong header và menu responsive, bước tiếp theo là xây dựng bố cục thân trang gồm:

• Nội dung chính (main content)
• Sidebar (cột bên)

Bố cục này rất phổ biến trong các trang blog, tin tức, cửa hàng,…
Trong bài này, bạn sẽ học:

• Cách chia layout 2 cột bằng Flexbox
• Làm sidebar nằm bên phải trên desktop
• Tự động xuống dưới nội dung trên mobile

1. Cấu trúc HTML

📋 Copy<div class="page-container">
  <main class="main-content">
    <h1>Bài viết nổi bật</h1>
    <p>Đây là phần nội dung chính của trang.</p>
  </main>

  <aside class="sidebar">
    <h2>Tin mới</h2>
    <ul>
      <li><a href="#">Tin 1</a></li>
      <li><a href="#">Tin 2</a></li>
    </ul>
  </aside>
</div>

2. CSS cho layout 2 cột

📋 Copy.page-container {
  display: flex;
  gap: 24px;
  padding: 24px;
  max-width: 1200px;
  margin: auto;
}

.main-content {
  flex: 3;
}

.sidebar {
  flex: 1;
  background: #f8f8f8;
  padding: 16px;
  border-left: 1px solid #ddd;
}

→ Mặc định trên desktop, layout sẽ chia theo tỷ lệ 3:1

3. Responsive: ẩn sidebar hoặc chuyển xuống dưới

📋 Copy@media (max-width: 768px) {
  .page-container {
    flex-direction: column;
  }

  .sidebar {
    border-left: none;
    border-top: 1px solid #ddd;
    margin-top: 24px;
  }
}

→ Trên mobile:

• Các phần xếp dọc
• Sidebar nằm dưới nội dung chính
• Vẫn giữ khoảng cách hợp lý

4. Mở rộng: sidebar có thể ẩn/hiện bằng nút

Bạn có thể thêm một nút ẩn/hiện sidebar bằng JavaScript nếu muốn tinh gọn giao diện mobile hơn.

Ví dụ thêm:

📋 Copy<button class="toggle-sidebar">Mở Sidebar</button>

📋 Copydocument.querySelector('.toggle-sidebar').onclick = function () {
  document.querySelector('.sidebar').classList.toggle('active');
};

Và CSS:

📋 Copy.sidebar {
  display: none;
}
.sidebar.active {
  display: block;
}

5. Gợi ý thiết kế sidebar

• Thêm widget: tin nổi bật, tag, bài viết liên quan
• Gắn thêm quảng cáo hoặc sản phẩm nổi bật
• Tạo các box có tiêu đề và khoảng cách rõ ràng

Tóm tắt bài học