Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Masonry Layout Là Gì Và 18 Ví Dụ Thực Tế Trong Thiết Kế Web

Masonry Layout Là Gì Và 18 Ví Dụ Thực Tế Trong Thiết Kế Web


Ngày 27 Tháng 8 Năm 2020

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é:

Masonry Layout trên Pinterest

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

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.

Nguồn

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.

Nguồn

Thiết Kế Masonry Jquery

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.

Nguồn

Cách Tạo Masonry JS

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.

Nguồn

Thiết Kế CSS Grid Masonry

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.

Nguồn

Thiết Kế Masonry Layout CSS

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 (@jh2y) on CodePen.

Nguồn

Cách Tạo Masonry Infinite Scroll

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.

Nguồn

Cách Tạo Responsive Masonry Layout Jquery

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.

Nguồn

Xây Dựng Masonry Layout Bằng CSS Grid

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.

Nguồn

Thiết Kế Masonry Layout Jquery

Masonry Layout Jquery

Kết quả bạn xem bên dưới nhé!

See the Pen Masonry by RenGM (@Vidy) on CodePen.

Nguồn

Cách Tạo Masonry Image Layout

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.

Nguồn

Cách Tạo Masonry Layout HTML5 CSS3

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.

Nguồn

Thiết Kế Masonry JS Responsive

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.

Nguồn

Cách Tạo CSS Masonry Layout

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.

Nguồn

Thiết Kế Responsive Masonry Với CSS Column

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.

Nguồn

Thiết Kế Jquery Masonry Image Gallery

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.

Nguồn

Thiết Kế Masonry Image Gallery

Masonry Image Gallery

Kết quả bạn xem bên dưới nhé!

See the Pen Image Gallery by kw7oe (@kw7oe) on CodePen.

Nguồn

Cách Tạo Masonry Grid Gallery

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.

Nguồn

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ẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.