Hướng dẫn css grid vs bootstrap - lưới css so với bootstrap

Nên sử dụng Grid hay Bootstrap để xây dựng web layout? Thực ra mỗi phương pháp đều có ưu, nhược điểm riêng, nên câu trả lời có thể sẽ khác nhau đối với từng developer cụ thể

Web Layout là gì?? Layout là gì??

Web Layout (Bố cục web) có thể hiểu là cách mà chúng ta bố trí các thành phần chính trên một trang web. Layout (Bố cục web) có thể hiểu là cách mà chúng ta bố trí các thành phần chính trên một trang web.

Hướng dẫn css grid vs bootstrap - lưới css so với bootstrap

Hình 1: Trang web này có bố cục được phân chia thành các thành phần chính như Header, Thanh menu điều hướng, Nội dung…..

Để xây dựng một web layout có nhiều cách. Đã từng có một gian đoạn, các web developer làm điều đó bằng table hoặc floated layouts. Tuy nhiên sau này, khi yêu cầu web responsive được đặt ra, cách làm thủ công đó không đáp ứng được yêu cầu của nhà phát triển web. Để đáp ứng yêu cầu responsive, kỹ thuật Flexbox ra đời với chức năng phân chia bố cục web theo một chiều (ngang hoặc dọc), và hàng loạt các CSS Framework ra đời sau đó có tích hợp chức năng phân chia bố cục dựa trên kỹ thuật Flexbox như Bootstrap, Material UI, W3.css…. Tiếp đó, cùng với sự ra đời của CSS3 năm 2011, kỹ thuật CSS Grid ra đời với khả năng phân chia bố cục 2 chiều cùng lúc trở thành một công cụ tuyệt vời cho việc thiết kế bố cục web.

Sử dụng Bootstrap Grid System để thiết kế bố cục web như thế nào?

Bootstrap là một framework bao gồm các HTML, CSS và JavaScript template dùng để phát triển website chuẩn responsive, chứa các class đại diện cho các thuộc tính về giao diện được quy định sẵn như kích thước, màu sắc, độ cao, độ rộng… là một framework bao gồm các HTML, CSS và JavaScript template dùng để phát triển website chuẩn responsive, chứa các class đại diện cho các thuộc tính về giao diện được quy định sẵn như kích thước, màu sắc, độ cao, độ rộng…

Bootstrap Grid System là hệ thống bao gồm các class trong bootstrap được quy định để phân chia bố cục trang web. Ví dụ như: .row, .col-xs-*, .col-sm-*, col-md-*, ….. Theo đó, mỗi trang web sẽ được chia bố cục lưới 12 cột theo chiều ngang, và mỗi phần tử web sẽ được sắp xếp trên một Stack (là một thẻ ) định dạng vị trí, kích thước dựa trên bố cục lưới 12 cột đó.ootstrap Grid System là hệ thống bao gồm các class trong bootstrap được quy định để phân chia bố cục trang web. Ví dụ như: .row, .col-xs-*, .col-sm-*, col-md-*, ….. Theo đó, mỗi trang web sẽ được chia bố cục lưới 12 cột theo chiều ngang, và mỗi phần tử web sẽ được sắp xếp trên một Stack (là một thẻ

) định dạng vị trí, kích thước dựa trên bố cục lưới 12 cột đó.

Ngoài ra còn có các thiết kế được framework xây dựng sẵn như Carousel, Collapse, Dropdown, Media Object….. Như đã nói ở trên, Bootstrap quy định sẵn các thuộc tính giao diện vào trong các class cụ thể. Điều đó cho phép ta xây dựng bố cục trang web với Bootstrap Grid System chỉ bằng cách gọi các class cần thiết, mà thậm chí không cần code một dòng CSS nào.

Hướng dẫn css grid vs bootstrap - lưới css so với bootstrap

Chúng ta có thể xây dựng được bố cục như thế này….

Hướng dẫn css grid vs bootstrap - lưới css so với bootstrap

….. mà không cần code CSS một dòng nào

Bên cạnh đó, Bootstrap Grid System còn đảm bảo tính tương thích trên mọi thiết bị (responsive) điều này có được là do mã nguồn của Bootstrap được thiết kế tất cả các class của nó đều được hiển thị tốt trên từng loại kích cỡ màn hình (thông qua notation @media )

Ưu điểm:

  • Dễ học, phù hợp với người mới bắt đầu thiết kế web và chưa thành thạo với CSS.
  • Cộng đồng hỗ trợ khá đông đảo.
  • Một số cấu trúc kinh điển được thư viện Bootstrap xây dựng sẵn như Media, Collapse, Carousel….

Nhược điểm:

  • Phải tải bộ thư viện Bootstrap, và có khi là cả jQuery (Điều này khá phiền phức khi sử dụng chung với các framework Frontend khác như Angular, Reactjs, Vue.js)
  • Khó tùy chỉnh khi cần bổ sung, chỉnh sửa (phải viết code CSS ghi đè lên mã nguồn của Bootstrap)

Bạn có thể tìm hiểu kỹ hơn về Bootstrap Grid System: tại trang web w3schools.comBootstrap Grid System: tại trang web w3schools.com

Grid Layout là gì? Sử dụng Grid Layout để thiết kế bố cục web như thế nào?

CSS Grid Layout (Bố cục lưới) là một Module cung cấp một hệ thống bố cục dạng lưới 2 chiều (bao gồm các dòng và các cột cho phép developer có thể tùy chỉnh và đặt các thành phần web vào các ô trong lưới đó.là một Module cung cấp một hệ thống bố cục dạng lưới 2 chiều (bao gồm các dòng và các cột cho phép developer có thể tùy chỉnh và đặt các thành phần web vào các ô trong lưới đó.

Công việc của developer cụ thể là: Khai báo grid-container, là thẻ div được chọn (thông qua CSS Selector) để đặt bố cục lưới; định dạng bố cục lưới cho grid-container; và thiết lập các thuộc tính như vị trí, kích cỡ, giãn cách, căn lề, số ô lưới bao phủ …. cho các grid-items (là các phấn tử con của grid-container).

Hướng dẫn css grid vs bootstrap - lưới css so với bootstrap

Một ví dụ về khai báo và định dạng Grid Container….

Hướng dẫn css grid vs bootstrap - lưới css so với bootstrap

… và khai báo Grid Items …

  

Hướng dẫn css grid vs bootstrap - lưới css so với bootstrap

… và đây là kết quả. Tính năng kỳ diệu của CSS Grid Layout, là khả năng xây dựng bố cục lưới 2 chiều

CSS Grid Layout là một công cụ thiết kế web hữu hiệu vừa cho phép developer dễ dàng thiết kế bố cục trang web một cách dễ dàng và tiết kiệm code, vừa thuận lợi cho việc tùy chỉnh, bổ sung tính năng. Tuy nhiên, để áp dụng được kỹ thuật này đòi hỏi developer code thành thạo CSS cơ bản, và phải trải qua một quá trình làm quen với CSS Grid Layout System.

Ưu điểm:

  • Dễ học, phù hợp với người mới bắt đầu thiết kế web và chưa thành thạo với CSS.
  • Cộng đồng hỗ trợ khá đông đảo.

Nhược điểm:

  • Phải tải bộ thư viện Bootstrap, và có khi là cả jQuery (Điều này khá phiền phức khi sử dụng chung với các framework Frontend khác như Angular, Reactjs, Vue.js)

Khó tùy chỉnh khi cần bổ sung, chỉnh sửa (phải viết code CSS ghi đè lên mã nguồn của Bootstrap)CSS Grid Layout Module: tại trang web w3schools.com

Bạn có thể tìm hiểu kỹ hơn về Bootstrap Grid System: tại trang web w3schools.com

Grid Layout là gì? Sử dụng Grid Layout để thiết kế bố cục web như thế nào?Thực ra mỗi phương pháp đều có ưu, nhược điểm riêng, nên câu trả lời có thể sẽ khác nhau đối với từng developer cụ thể. Tuy nhiên, mình đã từng có kinh nghiệm áp dụng qua hai phương thức này, và mạn phép có lời khuyên như sau.

Đối với Bootstrap Grid System, đây sẽ là lựa chọn tối ưu nếu bạn là những người mới học lập trình web, hoặc bạn là developer chuyên về Backend. Sử dụng Bootstrap cho phép bạn  có thể nhanh chóng phân chia bố cục trang web và xây dựng nhiều tính năng về giao diện khác mà không cần đi quá sâu vào CSS – vốn là một cực hình đối với developer Backend. Tất nhiên khi cần tùy chỉnh giao diện, thì việc viết code CSS ghi đè lên mã nguồn Bootstrap sẽ là một khó khăn, nhưng bù lại bạn có thể dựa vào sự hỗ trợ của cộng đồng Bootstrap đông đảo và giàu kinh nghiệm. Hơn nữa, nếu bạn xây dựng giao diện web có áp dụng nhiều chức năng khác của Bootstrap như Carousel, Collapse, Pop-ups, Modal…. Thì việc bạn tận dụng thêm Grid System của Bootstrap để phân chia bố cục web cũng hoàn toàn hợp lý.Bootstrap Grid System, đây sẽ là lựa chọn tối ưu nếu bạn là những người mới học lập trình web, hoặc bạn là developer chuyên về Backend. Sử dụng Bootstrap cho phép bạn  có thể nhanh chóng phân chia bố cục trang web và xây dựng nhiều tính năng về giao diện khác mà không cần đi quá sâu vào CSS – vốn là một cực hình đối với developer Backend. Tất nhiên khi cần tùy chỉnh giao diện, thì việc viết code CSS ghi đè lên mã nguồn Bootstrap sẽ là một khó khăn, nhưng bù lại bạn có thể dựa vào sự hỗ trợ của cộng đồng Bootstrap đông đảo và giàu kinh nghiệm. Hơn nữa, nếu bạn xây dựng giao diện web có áp dụng nhiều chức năng khác của Bootstrap như Carousel, Collapse, Pop-ups, Modal…. Thì việc bạn tận dụng thêm Grid System của Bootstrap để phân chia bố cục web cũng hoàn toàn hợp lý.

Đối với CSS Grid Layout, đây sẽ là lựa chọn tối ưu nếu bạn chuyên về Frontend hoặc ít nhất đã có khả năng code CSS thành thạo. Đặc biệt khi bạn sử dụng các framework Frontend (Angular, Reactjs, Vue) để xây dựng giao diện thì việc tải thêm bộ mã nguồn khổng lồ của Bootstrap không phải là sự lựa chọn hay, đôi lúc còn gây ra bugs. Thay vào đó, với việc bạn đã quen với code CSS thì việc làm chủ CSS Grid Layout chắc hẳn không thành vấn đề. Mặt khác, CSS Grid Layout còn cho phép việc tùy chỉnh giao diện trở nên dễ dàng hơn hẳn Bootstrap.CSS Grid Layout, đây sẽ là lựa chọn tối ưu nếu bạn chuyên về Frontend hoặc ít nhất đã có khả năng code CSS thành thạo. Đặc biệt khi bạn sử dụng các framework Frontend (Angular, Reactjs, Vue) để xây dựng giao diện thì việc tải thêm bộ mã nguồn khổng lồ của Bootstrap không phải là sự lựa chọn hay, đôi lúc còn gây ra bugs. Thay vào đó, với việc bạn đã quen với code CSS thì việc làm chủ CSS Grid Layout chắc hẳn không thành vấn đề. Mặt khác, CSS Grid Layout còn cho phép việc tùy chỉnh giao diện trở nên dễ dàng hơn hẳn Bootstrap.

Tạm kết

Tất nhiên, trên đây chỉ là quan điểm cá nhân của mình được rút ra từ kinh nghiệm làm một vài dự án Frontend nho nhỏ. Nhiều bạn có thể có quan điểm khác. Hãy nêu ý kiến đóng góp cho bài viết của mình ở dưới phần bình luận nhé.