1. Xuất hiện từ đầu thế kỷ XX trong phong trào (Constructivism) nghệ thuật / kiến trúc 2. Tạo nên các khung nền, hỗ trợ việc sắp xếp bố cục theo trật tự / thống nhất / cân bằng 3. Hệ thống lưới thường gặp: - Lưới nhiều cột (Mutilcolumn grid) - Lưới một cột (Single column grid) - Lưới module (Modular grid) - Lưới đường cơ sở (Baseļine grid) 4. Vai trò - Tổ chức: Có các đường căn gióng tiện lợi, dễ dàng sắp xếp các thành phần được ngăn nắp - Cân bằng: Dù là đối xứng / bất đối xứng, mang lại cái nhìn trực quan, đảm bảo sự cân bằng - Tách biệt thành phần: Phân chia nội dung, tạo khoảng cách các thành phần hiệu quả 5. Ứng dụng - Lưới trong thiết kế UI UX: Vai trò đặc biệt quan trọng trong Responsive web design - Lưới trong in ấn: Googe "Grid system" 6. Responsive web design - Grid: Thành phần cha - Row: Dòng - Column: Cột ( Column Parent - Column Child ) - Getter: Khoảng cách 2 phía của cột
Các video của anh rất hay lại còn rất bổ ích , lại free nữa . Em cảm ơn anh rất nhiều , chúc anh Sơn thật nhiều sức khoẻ và F8 ngày càng phát triển nhé :)))
Cái này nếu mình dùng chung với bootstrap thì ntn nhỉ? vd mình muốn dùng các element khác của bootstrap và dùng grid system này thì có xung đột j không nhỉ? hoặc có cách nào để mình loại bỏ cái grid của bootstrap và thay thế bằng grid system của a Sơn đc không nhỉ?
Cảm ơn bạn nha. Video này và video tới (10 phút) là 2 videos lý thuyết để các bạn nắm rõ bản chất, tư tưởng của grid system. Sau đó chúng ta tự tay tạo ra 1 thư viện nho nhỏ để sử dụng khi làm responsive bạn nhé.
1. Xuất hiện từ đầu thế kỷ XX trong phong trào (Constructivism) nghệ thuật / kiến trúc
2. Tạo nên các khung nền, hỗ trợ việc sắp xếp bố cục theo trật tự / thống nhất / cân bằng
3. Hệ thống lưới thường gặp:
- Lưới nhiều cột (Mutilcolumn grid)
- Lưới một cột (Single column grid)
- Lưới module (Modular grid)
- Lưới đường cơ sở (Baseļine grid)
4. Vai trò
- Tổ chức: Có các đường căn gióng tiện lợi, dễ dàng sắp xếp các thành phần được ngăn nắp
- Cân bằng: Dù là đối xứng / bất đối xứng, mang lại cái nhìn trực quan, đảm bảo sự cân bằng
- Tách biệt thành phần: Phân chia nội dung, tạo khoảng cách các thành phần hiệu quả
5. Ứng dụng
- Lưới trong thiết kế UI UX: Vai trò đặc biệt quan trọng trong Responsive web design
- Lưới trong in ấn: Googe "Grid system"
6. Responsive web design
- Grid: Thành phần cha
- Row: Dòng
- Column: Cột ( Column Parent - Column Child )
- Getter: Khoảng cách 2 phía của cột
Các video của anh rất hay lại còn rất bổ ích , lại free nữa . Em cảm ơn anh rất nhiều , chúc anh Sơn thật nhiều sức khoẻ và F8 ngày càng phát triển nhé :)))
Rất hay anh ạ
video rất bổ ích. luôn ủng hộ anh
Anh ơi, anh làm video hướng dẫn PHP đi anh. Nếu cả msql nữa thì hay quá.
khoảng cách giữa các column là gutters chứ không phải getters anh ơi
mong anh ra video hệ thống lưới này kết hợp với react sẽ như thế nào ạ
video hay hóng phần tiếp
Cái này nếu mình dùng chung với bootstrap thì ntn nhỉ? vd mình muốn dùng các element khác của bootstrap và dùng grid system này thì có xung đột j không nhỉ? hoặc có cách nào để mình loại bỏ cái grid của bootstrap và thay thế bằng grid system của a Sơn đc không nhỉ?
khoang cach giua cac cot la Gutter anh a.
hay quas anh oiiiiiiii
cái khoảng cách mà anh bảo nó là gutter đúng ko ạ?
Comment đầu aihihih. Like cmt phát rồi xem video. Chắc lại ngon lành cành đào
Cảm ơn bạn nha. Video này và video tới (10 phút) là 2 videos lý thuyết để các bạn nắm rõ bản chất, tư tưởng của grid system. Sau đó chúng ta tự tay tạo ra 1 thư viện nho nhỏ để sử dụng khi làm responsive bạn nhé.
@@F8VNOfficial dạ vâng quá hay lun
Anh ơi chỉ em cách show bài viết ra dạng lưới như Pinterest trong Wordpress với. Rất mong pro hướng dẫn
a có làm về boostrap k ạ
cảm ơn anh.
sếp không gửi file tài liệu vào đây hả sếp? :v
Cái addon để đo với vẽ lưới trên chrome là gì vậy ạ
Page ruler extension em nhé
Cái này giống boostrap đúng kh a
Bên css gatter nó gọi là gap
gutter