Khái niệm Grid system | Hệ thống lưới trong thiết kế website

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 ธ.ค. 2024

ความคิดเห็น • 24

  • @Kevin-xi3nz
    @Kevin-xi3nz 2 ปีที่แล้ว +13

    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

  • @dieukhanhquach8489
    @dieukhanhquach8489 3 ปีที่แล้ว +1

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

  • @learningonline5533
    @learningonline5533 4 ปีที่แล้ว +4

    Rất hay anh ạ

  • @lebaloc9114
    @lebaloc9114 3 ปีที่แล้ว

    video rất bổ ích. luôn ủng hộ anh

  • @hopnguyentien4299
    @hopnguyentien4299 4 ปีที่แล้ว +3

    Anh ơi, anh làm video hướng dẫn PHP đi anh. Nếu cả msql nữa thì hay quá.

  • @challengesbody393
    @challengesbody393 3 ปีที่แล้ว +6

    khoảng cách giữa các column là gutters chứ không phải getters anh ơi

  • @01.nguyenvanan53
    @01.nguyenvanan53 9 หลายเดือนก่อน

    mong anh ra video hệ thống lưới này kết hợp với react sẽ như thế nào ạ

  • @AnhNguyen-li9ht
    @AnhNguyen-li9ht 4 ปีที่แล้ว

    video hay hóng phần tiếp

  • @lonelycat8576
    @lonelycat8576 2 ปีที่แล้ว

    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ỉ?

  • @wannabeskinnydonut3553
    @wannabeskinnydonut3553 3 ปีที่แล้ว

    khoang cach giua cac cot la Gutter anh a.

  • @linhdtn_741
    @linhdtn_741 3 ปีที่แล้ว

    hay quas anh oiiiiiiii

  • @LeDinhHiu
    @LeDinhHiu 4 ปีที่แล้ว +1

    cái khoảng cách mà anh bảo nó là gutter đúng ko ạ?

  • @daenvlog4769
    @daenvlog4769 4 ปีที่แล้ว

    Comment đầu aihihih. Like cmt phát rồi xem video. Chắc lại ngon lành cành đào

    • @F8VNOfficial
      @F8VNOfficial  4 ปีที่แล้ว +1

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

    • @daenvlog4769
      @daenvlog4769 4 ปีที่แล้ว

      @@F8VNOfficial dạ vâng quá hay lun

  • @tatthanhphanho244
    @tatthanhphanho244 3 ปีที่แล้ว

    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

  • @truongminhphuc4337
    @truongminhphuc4337 4 ปีที่แล้ว

    a có làm về boostrap k ạ

  • @vatlyvadoisong3
    @vatlyvadoisong3 3 ปีที่แล้ว

    cảm ơn anh.

  • @kai.nquyenx
    @kai.nquyenx 3 ปีที่แล้ว

    sếp không gửi file tài liệu vào đây hả sếp? :v

  •  4 ปีที่แล้ว

    Cái addon để đo với vẽ lưới trên chrome là gì vậy ạ

    • @F8VNOfficial
      @F8VNOfficial  4 ปีที่แล้ว +1

      Page ruler extension em nhé

  • @dongnguyen6471
    @dongnguyen6471 4 ปีที่แล้ว

    Cái này giống boostrap đúng kh a

  • @toannguyen2182
    @toannguyen2182 4 ปีที่แล้ว

    Bên css gatter nó gọi là gap

  • @cesmorf5398
    @cesmorf5398 3 ปีที่แล้ว +1

    gutter