Ngày hôm nay chúng ta sẽ đi vào tìm hiểu những masonry layout đẹp và sáng tạo được thiết kế bằng HTML, CSS, Javascript cho trang web nhé!
Masonry Layout Là Gì?
Masonry Layout là một hệ thống lưới được xây dựng dựa trên các cột với chiều rộng của đối tượng được quy định sẵn. Chức năng chính của layout này là giúp bạn có thể tận dụng được triệt để không gian cũng như loại bỏ những khoảng trống không cần thiết trên trang web. Để giúp bạn dễ hình dung hơn thì chúng ta hãy cùng nhau xem thiết kế một trang web về mạng xã hội hình ảnh sau đây nhé:
Nếu bạn muốn tìm hiểu thêm về Masonry Layout thì có thể tham khảo bài viết ở đây nhé!
Các Ví Dụ Masonry Layout Cho Website
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Cách Tạo Masonry Layout Bằng Flexbox CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Pure CSS Masonry Gallery with Flexbox by digistate (@digistate) on CodePen.
Thiết Kế Masonry HTML5 CSS3
Kết quả bạn xem bên dưới nhé!
See the Pen Masonry Layout Demo 1 by Jen Simmons (@jensimmons) on CodePen.
Thiết Kế Masonry Jquery
Kết quả bạn xem bên dưới nhé!
See the Pen Masonry with filtering function using "Multiple Filter Masonry" by digistate (@digistate) on CodePen.
Cách Tạo Masonry JS
Kết quả bạn xem bên dưới nhé!
See the Pen FLIP Image Grid Gallery Transition | 🔍 Magnified Masonry | @keyframers 2.7.0 Live @ CodePen Orlando by haycuoilennao19 (@haycuoilennao19) on CodePen.
Thiết Kế CSS Grid Masonry
Kết quả bạn xem bên dưới nhé!
See the Pen CSS Grid - Masonry by César (@cesalberca) on CodePen.
Thiết Kế Masonry Layout CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Pure CSS masonry layout w/ Flexbox by Jhey (@jh3y) on CodePen.
Cách Tạo Masonry Infinite Scroll
Kết quả bạn xem bên dưới nhé!
See the Pen Infinite Scroll - Masonry by Dave DeSandro (@desandro) on CodePen.
Cách Tạo Responsive Masonry Layout Jquery
Kết quả bạn xem bên dưới nhé!
See the Pen Responsive post grid with Masonry by Maxime Lafarie (@maximelafarie) on CodePen.
Xây Dựng Masonry Layout Bằng CSS Grid
Kết quả bạn xem bên dưới nhé!
See the Pen Rahul Arora's Left-to-right Masonry Layout using CSS Grid by Chris Coyier (@chriscoyier) on CodePen.
Thiết Kế Masonry Layout Jquery
Kết quả bạn xem bên dưới nhé!
See the Pen Masonry by RenGM (@Vidy) on CodePen.
Cách Tạo Masonry Image Layout
Kết quả bạn xem bên dưới nhé!
See the Pen Masonry Layout with CSS Grids by Madalena Aza (@Madalena-Design) on CodePen.
Cách Tạo Masonry Layout HTML5 CSS3
Kết quả bạn xem bên dưới nhé!
See the Pen CSS Masonry Effect by Luca (@93lucasp) on CodePen.
Thiết Kế Masonry JS Responsive
Kết quả bạn xem bên dưới nhé!
See the Pen Masonry Layout JS Vanilla by Alberto Mateo (@Mathiew82) on CodePen.
Cách Tạo CSS Masonry Layout
Kết quả bạn xem bên dưới nhé!
See the Pen CSS Column masonry layout by Trevor Eyre (@trevoreyre) on CodePen.
Thiết Kế Responsive Masonry Với CSS Column
Kết quả bạn xem bên dưới nhé!
See the Pen Responsive pseudo Masonry in CSS column by Olivier C (@olivier-c) on CodePen.
Thiết Kế Jquery Masonry Image Gallery
Kết quả bạn xem bên dưới nhé!
See the Pen Isotope & Fancybox by Ungmo Lee (@ungmo2) on CodePen.
Thiết Kế Masonry Image Gallery
Kết quả bạn xem bên dưới nhé!
See the Pen Image Gallery by kw7oe (@kw7oe) on CodePen.
Cách Tạo Masonry Grid Gallery
Kết quả bạn xem bên dưới nhé!
See the Pen Masonry Grid Gallery - CSS Practice by Kate Hummer (@katehummer) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những Masonry Layout hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!