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