Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu các ví dụ về việc xây dựng bố cục website bằng CSS Grid và Flexbox hữu ích cho thiết kế và phát triển web nhé!
Responsive Flexbox Grid Examples
Và dưới đây là dự án Responsive Flexbox Grid Examples trên Codepen nha!
See the Pen Responsive Flexbox Grid by Guus Lieben (@guuslieben) on CodePen.
Percentage grid system
Và dưới đây là dự án Percentage grid system trên Codepen nha!
See the Pen Percentage grid system by drus unlimited (@drus) on CodePen.
Layout Flexbox
Và dưới đây là dự án Layout Flexbox trên Codepen nha!
See the Pen rVRWXw by Anna (@madebyanna) on CodePen.
Art challenge
Và dưới đây là dự án Art challenge trên Codepen nha!
See the Pen Art challenge by Ilya (@defunxe) on CodePen.
CSS Grid Layout - Basic Grid
Và dưới đây là dự án CSS Grid Layout - Basic Grid trên Codepen nha!
See the Pen CSS Grid Layout - Basic Grid by Mozilla Developers (@mozilladevelopers) on CodePen.
CSS Grid Responsive Image
Và dưới đây là dự án CSS Grid Responsive Image trên Codepen nha!
See the Pen CSS Grid Responsive Image Gallery by Stephanie (@ramenhog) on CodePen.
CSS Grid Layout with @support flexbox
Và dưới đây là dự án CSS Grid Layout with @support flexbox trên Codepen nha!
See the Pen CSS Grid Layout with @support flexbox fallback by Gustaf Holm (@primalivet) on CodePen.
CSS grid calendar
Và dưới đây là dự án CSS grid calendar trên Codepen nha!
See the Pen CSS grid calendar by Mert Cukuren (@knyttneve) on CodePen.
Layout with grid-template-columns
Và dưới đây là dự án Layout with grid-template-columns trên Codepen nha!
See the Pen CSS Grid Layout with grid-template-columns: repeat(); by Stacy (@stacy) on CodePen.
Product Image Grid
Và dưới đây là dự án Product Image Grid trên Codepen nha!
See the Pen Product by Katherine Kato (@kathykato) on CodePen.
CSS Grid Menu Panels
Và dưới đây là dự án CSS Grid Menu Panels trên Codepen nha!
See the Pen CSS Grid Menu Panels by Ryan Mulligan (@hexagoncircle) on CodePen.
Instagram Profile Layout
Và dưới đây là dự án Instagram Profile Layout trên Codepen nha!
See the Pen Instagram Profile Layout with CSS Grid & Flexbox by George W. Park (@GeorgePark) on CodePen.
CSS Grid Layout - New Terminology
Và dưới đây là dự án CSS Grid Layout - New Terminology trên Codepen nha!
See the Pen CSS Grid Layout - New Terminology by Stacy (@stacy) on CodePen.
CSS Grid Layout - Template Areas
Và dưới đây là dự án CSS Grid Layout - Template Areas trên Codepen nha!
See the Pen CSS Grid Layout - Template Areas by Mozilla Developers (@mozilladevelopers) on CodePen.
Standard grid-based 3-column layout
Và dưới đây là dự án Standard grid-based 3-column layout trên Codepen nha!
See the Pen Standard grid-based 3-column layout with 2-column option by Morten Rand-Hendriksen (@mor10) on CodePen.
CSS Grid Layout Demo
Và dưới đây là dự án CSS Grid Layout Demo trên Codepen nha!
See the Pen CSS Grid Layout Demo by Stacy (@stacy) on CodePen.
CSS Grid Layout Demo 5
Và dưới đây là dự án CSS Grid Layout Demo 5 trên Codepen nha!
See the Pen CSS Grid Layout Demo 5 - Grid Gap by Stacy (@stacy) on CodePen.
Responsive CSS Grid Gallery
Và dưới đây là dự án Responsive CSS Grid Gallery trên Codepen nha!
See the Pen Responsive CSS Grid Gallery by Jessica (@JessMadeline) on CodePen.
YouTube Channel Layout with CSS Grid & Flexbox
Và dưới đây là dự án YouTube Channel Layout with CSS Grid & Flexbox trên Codepen nha!
See the Pen YouTube Channel Layout with CSS Grid & Flexbox by George W. Park (@GeorgePark) on CodePen.
CSS Grid With Image Span
Và dưới đây là dự án CSS Grid With Image Span trên Codepen nha!
See the Pen CSS Grid With Image Span by Brad Traversy (@bradtraversy) on CodePen.
Nếu bạn muốn tham khảo thêm các ví dụ masonry layout thì truy cập đường dẫn bên dưới nha.
Masonry Layout
Nếu bạn muốn tham khảo thêm các ví dụ thiết kế layout cho website thì truy cập đường dẫn bên dưới nha.
Layout Design
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những ví dụ về CSS 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ẻ!
