Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
20 Ví Dụ CSS Layout Phổ Biến Dành cho Thiết Kế Web

20 Ví Dụ CSS Layout Phổ Biến Dành cho Thiết Kế Web


Ngày 11 Tháng 12 Năm 2020

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

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.

Nguồn

Percentage grid system

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.

Nguồn

Layout Flexbox

Layout Flexbox

Và dưới đây là dự án Layout Flexbox trên Codepen nha!

See the Pen rVRWXw by Anna (@madebyanna) on CodePen.

Nguồn

Art challenge

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.

Nguồn

CSS Grid Layout - Basic Grid

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.

Nguồn

CSS Grid Responsive Image

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.

Nguồn

CSS Grid Layout with @support flexbox

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.

Nguồn

CSS grid calendar

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.

Nguồn

Layout with grid-template-columns

 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.

Nguồn

Product Image Grid

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.

Nguồn

CSS Grid Menu Panels

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.

Nguồn

Instagram Profile Layout

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.

Nguồn

CSS Grid Layout - New Terminology

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.

Nguồn

CSS Grid Layout - Template Areas

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.

Nguồn

Standard grid-based 3-column layout

 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.

Nguồn

CSS Grid Layout Demo

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.

Nguồn

CSS Grid Layout Demo 5

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.

Nguồn

Responsive CSS Grid Gallery

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.

Nguồn

YouTube Channel Layout with CSS Grid & Flexbox

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.

Nguồn

CSS Grid With Image Span

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.

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