Trong quá trình thiết kế giao diện website, việc sắp xếp bố cục các thành phần không chỉ giúp trang web trở nên trực quan, dễ sử dụng mà còn thể hiện tính chuyên nghiệp và trải nghiệm người dùng. CSS chính là công cụ quan trọng giúp bạn kiểm soát vị trí và cách hiển thị của từng phần tử trong trang từ vị trí mặc định trong luồng tài liệu, mối quan hệ với các thành phần xung quanh, đến vùng chứa cha và khung nhìn trình duyệt.
Trong bài viết dưới đây BNDigi sẽ hướng dẫn bạn cách chia bố cục trang web bằng CSS một cách hiệu quả, logic và dễ áp dụng trong thực tế.
Các phương pháp chia bố cục trang web bằng CSS
Bố cục trang web là yếu tố quan trọng ảnh hưởng đến trải nghiệm người dùng và hiệu quả trình bày nội dung. Hiện nay, CSS cung cấp nhiều phương pháp để chia bố cục phù hợp với từng mục đích thiết kế. Bài viết dưới đây tổng hợp 4 phương pháp phổ biến nhất trong thiết kế web hiện đại.
1. Sử dụng thẻ <div> và CSS cơ bản (Float)
Cách thực hiện:
- Tạo một container bao quanh toàn bộ nội dung.
- Chia các cột con bằng thẻ <div> riêng biệt.
- Thiết lập chiều rộng cụ thể cho từng cột và container.
- Áp dụng float: left hoặc float: right để xếp các cột cạnh nhau.
- Sử dụng clear: both hoặc kỹ thuật clearfix để xử lý hiện tượng tràn lề (clearfix bug).
Ưu điểm:
- Hỗ trợ tốt trên hầu hết trình duyệt, kể cả cũ.
- Dễ tiếp cận đối với người mới học CSS.
Nhược điểm:
- Khó kiểm soát khi thiết kế phức tạp.
- Không phù hợp với bố cục responsive.
- Cần xử lý thủ công để tránh lỗi tràn layout.
2. Sử dụng Flexbox để tạo bố cục linh hoạt
Flexbox là mô hình bố cục một chiều, cho phép sắp xếp phần tử theo chiều ngang hoặc chiều dọc một cách linh hoạt và thuận tiện trong các thiết kế đáp ứng.
Các thuộc tính quan trọng:
- display: flex: Kích hoạt Flexbox.
- flex-direction: Xác định hướng xếp phần tử (row, column).
- justify-content: Căn chỉnh các phần tử theo trục chính.
- align-items: Căn chỉnh các phần tử theo trục phụ.
Ví dụ bố cục đơn giản:
html
CopyEdit
<div class=”container”>
<header>Header</header>
<div class=”main”>
<aside>Sidebar</aside>
<section>Content</section>
</div>
<footer>Footer</footer>
</div>
css
CopyEdit
.container {
display: flex;
flex-direction: column;
}
.main {
display: flex;
}
aside {
width: 25%;
}
section {
width: 75%;
}
Ưu điểm:
- Dễ tạo bố cục hàng hoặc cột.
- Hỗ trợ thiết kế responsive hiệu quả.
- Cấu trúc mã HTML sạch hơn float.
Nhược điểm:
- Không tối ưu cho bố cục lưới hai chiều.
3. Sử dụng CSS Grid để tạo bố cục hai chiều
CSS Grid là mô hình bố cục mạnh mẽ, cho phép xây dựng bố cục lưới cả theo hàng và cột, rất phù hợp với thiết kế tổng thể toàn trang web.
Các thuộc tính quan trọng:
- display: grid: Kích hoạt Grid container.
- grid-template-columns, grid-template-rows: Xác định số lượng và kích thước cột/hàng.
- grid-template-areas: Đặt tên và xác định vùng bố cục.
Ví dụ bố cục 3 cột với header và footer toàn chiều rộng:
css
CopyEdit
.container {
display: grid;
grid-template-areas:
“header header header”
“sidebar content ads”
“footer footer footer”;
grid-template-columns: 1fr 2fr 1fr;
}
html
CopyEdit
<div class=”container”>
<div style=”grid-area: header;”>Header</div>
<div style=”grid-area: sidebar;”>Sidebar</div>
<div style=”grid-area: content;”>Content</div>
<div style=”grid-area: ads;”>Ads</div>
<div style=”grid-area: footer;”>Footer</div>
</div>
Ưu điểm:
- Phù hợp với bố cục phức tạp.
- Kiểm soát vùng nội dung chính xác và rõ ràng.
- Tách biệt rõ HTML và trình bày CSS.
So sánh tổng quát:
| Phương pháp | Hướng xếp | Ưu điểm | Hạn chế |
| Float | Một chiều | Dễ dùng, phổ biến | Khó bảo trì, không linh hoạt |
| Flexbox | Một chiều | Linh hoạt, responsive tốt | Không tối ưu bố cục hai chiều |
| CSS Grid | Hai chiều | Quản lý bố cục tổng thể | Cần trình duyệt hiện đại hơn |
4. Sử dụng mô-đun Multi-Column CSS
Multi-Column Layout là mô-đun CSS dùng để chia văn bản thành nhiều cột, thường ứng dụng trong trình bày bài viết, blog, tạp chí điện tử.
Thuộc tính chính:
- column-count: Số lượng cột cần chia.
- column-width: Chiều rộng cột tối thiểu.
- column-gap: Khoảng cách giữa các cột.
Ví dụ:
css
CopyEdit
.article {
column-count: 3;
column-gap: 30px;
}
Ứng dụng:
- Hiển thị nội dung dạng báo chí, bài viết dài.
- Tạo trải nghiệm đọc tự nhiên, tương tự báo in.
- Kết hợp hiệu quả với hình ảnh, blockquote nhỏ.
Thiết kế bố cục trang web đáp ứng
Thiết kế bố cục responsive layout là quá trình xây dựng giao diện web có khả năng tự động thay đổi, co giãn hoặc sắp xếp lại thành phần tùy theo kích thước và loại thiết bị (điện thoại, tablet, laptop…). Mục tiêu là đảm bảo trải nghiệm người dùng nhất quán và tối ưu dù họ truy cập bằng bất kỳ thiết bị nào.
Khái niệm Responsive Design trong CSS
Responsive Design là phương pháp thiết kế giúp website hiển thị tốt trên mọi kích thước màn hình bằng cách sử dụng các kỹ thuật như:
- Media Queries: điều kiện CSS để áp dụng các style khác nhau theo độ rộng thiết bị.
- Flexible Grids & Layouts: sử dụng hệ thống lưới linh hoạt như Flexbox hoặc CSS Grid.
- Flexible Images: hình ảnh co giãn tự động mà không bị vỡ hay méo.
Với CSS, chỉ cần một bộ mã HTML & CSS duy nhất, bạn có thể kiểm soát toàn bộ giao diện cho nhiều thiết bị khác nhau.
Sử dụng Media Queries để thay đổi bố cục theo kích thước màn hình
Media Queries là công cụ cốt lõi trong responsive design, cho phép bạn viết CSS tùy biến dựa vào độ rộng (width), độ cao (height), mật độ điểm ảnh (resolution), hướng (orientation),…
Cú pháp ví dụ:
css
CopyEdit
/* Mặc định: desktop */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/* Dưới 768px: điện thoại */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
Ví dụ chuyển bố cục 3 cột sang 1 cột trên thiết bị di động
Giả sử bạn có một layout 3 cột trên desktop, nhưng muốn hiển thị thành 1 cột dọc trên mobile, có thể dùng Grid kết hợp Media Queries như sau:
html
CopyEdit
<div class=”grid-container”>
<div class=”box”>Cột 1</div>
<div class=”box”>Cột 2</div>
<div class=”box”>Cột 3</div>
</div>
css
CopyEdit
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* Responsive cho mobile */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}
Trên điện thoại, cả 3 cột sẽ xếp chồng theo chiều dọc, giúp dễ đọc và thao tác hơn.
Kết hợp Grid/Flexbox với Media Queries để tối ưu trải nghiệm người dùng
- Flexbox linh hoạt cho các bố cục 1 chiều (ngang hoặc dọc), rất phù hợp với menu, card, thanh điều hướng,…
- CSS Grid mạnh mẽ với bố cục 2 chiều (cột + hàng), thích hợp cho layout phức tạp.
Bạn có thể dùng kết hợp như sau:
css
CopyEdit
/* Desktop: 2 cột */
.section {
display: flex;
gap: 24px;
}
/* Mobile: 1 cột */
@media (max-width: 768px) {
.section {
flex-direction: column;
}
}
Tùy theo nội dung, bạn nên chọn Grid hoặc Flexbox, sau đó áp dụng Media Queries để kiểm soát bố cục, giúp website luôn đẹp – dễ dùng – tải nhanh chuẩn SEO trên mọi thiết bị.
Trên đây là hướng dẫn chi tiết về cách chia bố cục website bằng CSS, bạn đã nắm vững các phương pháp từ cơ bản đến nâng cao như Flexbox và CSS Grid. Việc làm chủ bố cục là chìa khóa để tạo ra những trang web đẹp, chuyên nghiệp và tối ưu trải nghiệm người dùng. Nếu bạn còn băn khoăn hoặc cần thiết kế website chuyên nghiệp, đừng ngần ngại liên hệ BNDigi qua hotline 0963.488.776 để được tư vấn và hỗ trợ nhanh chóng nhất nhé!
