Trong series này:

HTML + CSS + JS kết hợp Layout cơ bản với HTML và CSS Navigation bar responsive Card, Button và Badge Components Modal, Tabs và Accordion Dark Mode Toggle Validate Form thời gian thực
Sửa trang này

Layout cơ bản với HTML và CSS

Các kỹ thuật layout trong CSS

Có hai cách hiện đại để xây dựng layout phức tạp:

  • CSS Grid — layout 2 chiều (hàng + cột), tốt cho cấu trúc toàn trang
  • Flexbox — layout 1 chiều (hàng hoặc cột), tốt cho thanh nav, card row, align nội dung

Trong thực tế, chúng thường được dùng kết hợp: Grid cho layout tổng thể, Flexbox bên trong từng khối.

Layout trang với CSS Grid

    Kết quả 
    <div class="page-layout">
  <header>🌐 Website Header</header>
  <nav>
    <a href="#">Trang chủ</a><br>
    <a href="#">Về chúng tôi</a><br>
    <a href="#">Dịch vụ</a><br>
    <a href="#">Liên hệ</a>
  </nav>
  <main>
    <h2>Nội dung chính</h2>
    <p>Đây là vùng nội dung chính. Có thể đặt bài viết, danh sách, hoặc bất kỳ nội dung nào ở đây.</p>
  </main>
  <aside>
    <h3>Sidebar</h3>
    <p>Lọc, widget, quảng cáo…</p>
  </aside>
  <footer>© 2025 — Footer</footer>
</div>

    * { box-sizing: border-box; margin: 0; padding: 0; }

.page-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main"
    "nav    aside"
    "footer footer";
  grid-template-columns: 160px 1fr;
  grid-template-rows: auto 1fr auto auto;
  gap: 6px;
  min-height: 340px;
  font-family: sans-serif;
  font-size: 0.9rem;
}

header  { grid-area: header; background: #4472c4; color: white; padding: 0.75rem 1rem; }
nav     { grid-area: nav;    background: #8faadc; padding: 1rem; }
main    { grid-area: main;   background: #f5f7fa; padding: 1rem; }
aside   { grid-area: aside;  background: #dce6f1; padding: 1rem; }
footer  { grid-area: footer; background: #333;    color: white;  text-align: center; padding: 0.5rem; }

nav a { display: block; color: white; text-decoration: none; padding: 0.2rem 0; }
nav a:hover { text-decoration: underline; }

    Card grid với Flexbox

      Kết quả 
      <div class="card-grid">
  <div class="card"><div class="card-color" style="background:#4472c4"></div><h3>Tính năng 1</h3><p>Mô tả ngắn về tính năng này.</p></div>
  <div class="card"><div class="card-color" style="background:#ed7d31"></div><h3>Tính năng 2</h3><p>Mô tả ngắn về tính năng này.</p></div>
  <div class="card"><div class="card-color" style="background:#70ad47"></div><h3>Tính năng 3</h3><p>Mô tả ngắn về tính năng này.</p></div>
  <div class="card"><div class="card-color" style="background:#9b59b6"></div><h3>Tính năng 4</h3><p>Mô tả ngắn về tính năng này.</p></div>
</div>

      * { box-sizing: border-box; font-family: sans-serif; }

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  background: #f0f2f5;
}

.card {
  flex: 1 1 160px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform 0.2s;
}
.card:hover { transform: translateY(-3px); }

.card-color { height: 80px; }
.card h3 { margin: 0.75rem 0.75rem 0.25rem; font-size: 1rem; }
.card p  { margin: 0 0.75rem 0.75rem; font-size: 0.85rem; color: #666; }

      Khi nào dùng Grid, khi nào dùng Flexbox?

      Tình huống Nên dùng
      Layout toàn trang (header/sidebar/main/footer) CSS Grid
      Căn giữa phi element theo 2 chiều CSS Grid hoặc Flexbox
      Hàng ngang: nav links, button group Flexbox
      Card grid đều nhau CSS Grid (repeat(auto-fill, minmax(...)))
      Nội dung bên trong card Flexbox

      Bình luận