Tạo layout website responsive với CSS Grid và Mobile First

Cách xử lý là xây dựng layout website responsive, tức là cho bố cục tự thay đổi theo không gian hiển thị. Bài này hướng dẫn bạn dựng một layout gồm header, content, sidebar và footer bằng HTML, CSS Grid, Media Query, đồng thời phân biệt rõ hai tư duy PC First và Mobile First.

Vì sao layout responsive là nền tảng của website

Trên thiết bị có màn hình rộng, bạn có thể đặt phần content và sidebar trên cùng một hàng. Header nằm trên cùng, footer nằm cuối trang. Đây là bố cục phổ biến, trực quan và tận dụng tốt chiều ngang của màn hình.

Khi chuyển sang tablet hoặc điện thoại, không gian ngang giảm đi đáng kể. Nếu vẫn giữ hai cột cạnh nhau, content sẽ bị bó hẹp và sidebar cũng khó đọc. Giải pháp hợp lý là chuyển hai cột này thành các khối xếp dọc: header, content, sidebar, rồi đến footer.

Đó cũng là lý do tư duy Mobile First rất quan trọng. Bạn ưu tiên bố cục đơn giản, một cột trên thiết bị nhỏ trước, sau đó mới mở rộng thành hai cột khi màn hình đủ rộng. Cách làm này giúp website phục vụ tốt nhóm người dùng điện thoại, đồng thời dễ mở rộng về sau.

Xây dựng cấu trúc HTML cho layout

Trước khi viết CSS, bạn cần một cấu trúc HTML rõ ràng. Toàn bộ website được đặt trong một khối bao ngoài, thường đặt tên là wrapper. Bên trong gồm bốn vùng chính: header, content, sidebar và footer.

Header
Content

Cấu trúc này tạo ra bốn khu vực độc lập để bạn kiểm soát vị trí bằng CSS Grid. Khi giao diện phức tạp hơn, cách tổ chức rõ ràng từ đầu sẽ giúp bạn bảo trì code dễ hơn nhiều.

Thiết lập khung và lưới CSS Grid

1.1. Tạo vùng chứa có chiều rộng hợp lý

1. Giới hạn chiều rộng tối đa cho wrapper.
   • Dùng max-width: 960px để nội dung không giãn quá rộng trên màn hình lớn.
   • Dùng margin: auto để căn giữa toàn bộ website.
2. Đảm bảo layout có chiều cao tối thiểu.
   • Dùng min-height: calc(100vh - 20px) để khung layout gần phủ hết chiều cao màn hình.
   • Phần khoảng trừ giúp giao diện có khoảng thở ở phía trên và dưới.

1.2. Chia layout thành hai cột

1. Kích hoạt CSS Grid cho wrapper.
   • Đặt display: grid thay cho kiểu hiển thị block mặc định.
   • Grid giúp bạn điều khiển hàng và cột theo một sơ đồ trực quan.
2. Đặt cột content linh hoạt và sidebar cố định.
   • Dùng grid-template-columns: 1fr 200px.
   • 1fr chiếm phần không gian còn lại, còn sidebar giữ độ rộng 200 pixel.

Điểm mạnh của 1fr là cột content tự giãn theo phần chiều ngang còn lại. Bạn không cần tự tính từng kích thước cụ thể khi khung chứa thay đổi.

Sắp xếp các vùng bằng grid-template-areas

Nếu chỉ khai báo hai cột, các phần tử sẽ được Grid đặt theo thứ tự mặc định và chưa đúng bố cục bạn muốn. Để header và footer trải dài toàn bộ hàng, bạn nên dùng grid-template-areas.

Với layout màn hình lớn, bạn có ba hàng và hai cột. Hàng đầu dành cho header, hàng giữa gồm content và sidebar, hàng cuối là footer. Các vùng được mô tả theo sơ đồ sau:

grid-template-areas:
"header header"
"content sidebar"
"footer footer";

Sau đó, từng phần tử cần được gán đúng nhãn bằng thuộc tính grid-area. Header nhận nhãn header, content nhận nhãn content, sidebar nhận nhãn sidebar, và footer nhận nhãn footer.

Đừng đặt các nhãn này trong dấu nháy khi gán cho từng phần tử. Dấu nháy chỉ dùng trong phần khai báo sơ đồ grid-template-areas. Đây là lỗi nhỏ nhưng có thể khiến layout không hoạt động như mong muốn.

Kiểm soát chiều cao các hàng và khoảng cách

Header và footer thường chỉ cần cao đúng bằng nội dung bên trong. Trong khi đó, vùng chính ở giữa nên chiếm phần chiều cao còn lại. Bạn có thể làm điều này bằng grid-template-rows: auto 1fr auto.

Trong khai báo này, hàng đầu và hàng cuối dùng auto. Hàng giữa dùng 1fr để tự giãn. Khi content có nhiều nội dung thực tế, bạn nên để phần cần nở theo nội dung ở chế độ tự động thay vì cố định chiều cao.

Để các khối không dính sát vào nhau, dùng thuộc tính gap. Một khoảng cách nhỏ giữa header, content, sidebar và footer sẽ làm bố cục dễ nhìn hơn. Bạn cũng có thể thêm padding, màu nền, màu chữ, đường viền và bo góc để nhận diện từng vùng rõ ràng.

Chuyển layout hai cột sang một cột bằng Media Query

Đây là phần quyết định tính responsive của website. Khi màn hình nhỏ hơn ngưỡng phù hợp, layout phải chuyển từ hai cột sang một cột. Trong ví dụ này, điểm chuyển được đặt tại 768 pixel.

2.1. Cách làm PC First

1. Viết giao diện hai cột làm mặc định.
   • Phù hợp khi bạn bắt đầu thiết kế từ màn hình máy tính.
   • Wrapper mặc định có hai cột với content và sidebar nằm cạnh nhau.
2. Dùng điều kiện màn hình tối đa để đổi sang một cột.
   • Dùng @media (max-width: 768px).
   • Bên trong Media Query, đổi số cột thành 1fr và sắp lại các vùng theo chiều dọc.

@media (max-width: 768px) {
.wrapper {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
}

Điểm cần lưu ý là khi số cột đã đổi từ hai thành một, bạn cũng phải cập nhật lại grid-template-areas. Nếu chỉ đổi số cột mà giữ nguyên sơ đồ hai cột cũ, layout sẽ không chuyển đúng.

2.2. Cách làm Mobile First

1. Viết giao diện một cột làm mặc định.
   • Header, content, sidebar và footer được xếp dọc từ đầu.
   • Đây là bố cục an toàn, phù hợp cho điện thoại và các màn hình nhỏ.
2. Dùng điều kiện chiều rộng tối thiểu để mở rộng layout.
   • Dùng @media (min-width: 768px).
   • Khi màn hình từ 768 pixel trở lên, chuyển sang hai cột và ba hàng.

.wrapper {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
@media (min-width: 768px) {
.wrapper {
grid-template-columns: 1fr 200px;
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
}
}

PC First và Mobile First: nên chọn cách nào?

Tiêu chí	PC First	Mobile First
Bố cục mặc định	Hai cột trên màn hình lớn	Một cột trên màn hình nhỏ
Media Query	max-width	min-width
Hướng điều chỉnh	Thu nhỏ dần	Mở rộng dần
Phù hợp	Dự án đã có giao diện máy tính	Website mới, ưu tiên điện thoại

Về thực tế, Mobile First là hướng tiếp cận nên ưu tiên. Website hiện nay được truy cập nhiều trên điện thoại, vì vậy việc đảm bảo bố cục gọn gàng và dễ dùng ở màn hình nhỏ ngay từ đầu sẽ giúp bạn tránh nhiều chỉnh sửa về sau.

Điểm chuyển 768 pixel chỉ là một ví dụ cơ bản. Dự án thực tế có thể cần nhiều breakpoint khác nhau như 680 pixel, 768 pixel hoặc 1024 pixel, tùy thiết kế, nội dung và hành vi sử dụng của khách hàng.

Những lỗi thường gặp khi dựng layout responsive

• Chỉ đổi số cột mà không đổi grid-template-areas: Các vùng có thể vẫn giữ cấu trúc cũ và hiển thị sai thứ tự.
• Cố định quá nhiều kích thước: Đặt chiều rộng và chiều cao cứng khiến giao diện khó co giãn khi nội dung thay đổi.
• Để sidebar cạnh content trên điện thoại: Màn hình nhỏ sẽ bị chật, chữ khó đọc và thao tác trở nên kém thuận tiện.
• Dùng một breakpoint cho mọi trường hợp: Layout đơn giản có thể dùng một điểm chuyển, nhưng website thực tế thường cần kiểm tra kỹ ở nhiều kích thước.
• Bỏ qua khoảng cách giữa các khối: gap, padding và đường viền nhỏ giúp người dùng nhận biết cấu trúc trang tốt hơn.

FAQ

CSS Grid có thể thay thế hoàn toàn Flexbox không?

CSS Grid phù hợp để xây dựng bố cục theo cả hàng và cột. Flexbox vẫn rất hữu ích khi bạn chỉ cần căn chỉnh các phần tử theo một chiều, chẳng hạn nhóm nút bấm hoặc menu nhỏ.

Breakpoint 768 pixel có bắt buộc không?

Không. Đây là một điểm chuyển phổ biến để minh họa cách layout thay đổi. Bạn nên chọn breakpoint dựa trên thời điểm giao diện bắt đầu bị chật hoặc khó sử dụng.

Vì sao nên ưu tiên Mobile First?

Mobile First giúp bạn bắt đầu từ bố cục nhỏ gọn nhất, sau đó mở rộng khi có thêm không gian. Cách tiếp cận này giúp kiểm soát trải nghiệm trên điện thoại tốt hơn và tránh việc thu nhỏ một giao diện máy tính quá phức tạp.

Nếu bạn cần một website vừa có cấu trúc responsive rõ ràng vừa hỗ trợ mục tiêu kinh doanh và SEO, dịch vụ thiết kế website của MintStack có thể giúp bạn xây dựng nền tảng ổn định ngay từ đầu.