Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

CSS Grid Layout: các cột có kích thước động và các gutter (khoảng không gian giữa các cột) tốt hơn

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: A Quick Start Guide
CSS Grid Layout: Using Grid Areas

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong phần hướng dẫn này chúng ta sẽ lấy grid từ bài hướng dẫn trước của chúng ta và sử dụng nó như là một playground (nơi thực hành code) để tìm hiểu sâu hơn về Grid. Chúng ta sẽ cải tiến cách mà chúng ta định nghĩa các gutter của chúng ta, khảo sát tỉ mỉ các layout linh động, đơn vị fr, và giới thiệu hàm repeat().

Các đơn vị linh hoạt

Đặc điểm lớn nhất của Grid là cho phép chúng ta kiểm soát layout một cách chính xác ở trên trang web, do đó hãy biến grid tĩnh của chúng ta thành động trước khi chúng ta tiếp tục đi sâu hơn. Nếu như bạn còn nhớ, chúng ta đã định nghĩa grid của chúng ta bằng đơn vị kích thước tĩnh pixel.

Hoàn toàn có thể sử dụng những đơn vị khác ở đây, chẳng hạn như em, hoặc rem. Hoặc ngay cả những đơn vị ít được sử dụng như vh và vmin.

Trong trường hợp này chúng ta sẽ thay đổi các đơn vị pixel thành phần trăm. Vì chúng ta đang thiết lập chiều rộng các cột và các gutter của chúng ta bằng tay, nên chúng ta phải đảm bảo tổng của các giá trị phải bằng 100%:

Lưu ý khoảng cách

Có một cách mới hơn, hiệu quả hơn để định nghĩa kích thước của gutter, và đó là với một thuộc tính đặt biệt được tạo ra. Chúng ta có thể sử dụng grid-column-gap và grid-row-gap hoặc là cú pháp rút gọn grid-gap.

Sử dụng các công cụ này chúng ta không còn cần phải thêm các grid track để sắp xếp các gutter của chúng ta, chúng ta chỉ cần định nghĩa các cột và các dòng, vì thế trong trường hợp của chúng ta điều đó có nghĩa là ba trong một.

Ồ, nó hơi rối, nhưng nó làm tốt công việc. Sự khác nhau mà bạn sẽ thấy đó là chiều rộng cột bây giờ thêm vào tới 100%; các gutter của chúng ta sẽ thật sự được trừ ra từ chúng một cách tự động.

Lặp

Hãy viết cái này theo một cách ngắn gọn hơn, bằng cách sử dụng hàm repeat():

Điều này nói rằng "lặp lại 33.33% ba lần" tao ra cho chúng ta ba cột. Và chúng ta không còn cần tới grid-template-rows bởi vì giá trị auto đã được thiết lập mặc định. Bây giờ chúng ta chỉ cần cho các gutter của chúng ta lớn thế nào mà thôi.

grid-gap sẽ chấp nhật đơn vị cố định hoặc là linh động, nó có nghĩa là chúng ta có thể kết hợp một cách hoàn hảo các cột động và các gutter cố định mà không cần phải tự tính toán phức tạp.

Đặt lại các giá trị của grid-columngrid-row.

Có điều gì đó thiếu sót: chúng ta vẫn phải nạp grid-columngrid-row trong các phần tử grid của chúng ta, nhưng tất cả chúng đều sai bởi vì chúng ta không còn có nhiều các grid track. Thật may, bởi vì chúng ta đang sử dụng grid-gap để định nghĩa các gutter của chúng ta, chúng có thể để cho các phần tử tự động định vị trí, các phần tử sẽ không còn rơi vào trong các gutter nữa. Hiện tại, loại bỏ tất cả các vị trí:

Đơn vị fr

Một cải tiến cuối cùng có thể được tạo ra để grid của chúng ta đơn giản hơn; chúng ta sẽ giới thiệu đơn vị fr, hay phân số. Một đơn vị fr đơn mô tả "một phần của nhiều phần mà chúng ta chia đều nó". Ví dụ, chúng ta có thể định nghĩa các cột của chúng ta bằng cách sử dụng:

Ở đây có tổng cộng ba cái đơn vị fr, vì vậy mỗi cột sẽ có một phần ba chiều rộng. Dưới đây là một ví dụ khác:

Bây giờ có tổng cộng bốn đơn vị fr, vì thế cột đầu tiên sẽ chiếm một phần hai chiều rộng còn lại, với hai cột khác mỗi cái chiếm một phần tư.

Những đơn vị này thì thực sự mạnh mẽ, đặc biệt trong việc kết hợp với những đơn vị đo lường khác.

Dưới đây chúng ta đã định nghĩa bốn cột:

  • cái đầu tiền có chiều rộng cố định là 300px
  • cái cuối cùng thì linh hoạt với 20% chiều rộng của kho chứa grid
  • sau đó các đơn vị fr được tính toán, để cho cột thứ hai một phần của khoảng trống còn lại.
  • và cái thứ ba là ba phần.

Nó trông như thế này, hoàn toàn làm nổi bật việc tự động vị trí cũng như chín phần tử của chúng ta thay đổi để lấp đầy các khoảng trống:

Nhưng trở lại với grid ban đầu của chúng ta. Hãy thay thế những giá trị rối rắm và không chính xác 33.33% bằng 1fr:

Pen hoàn thiện

Kết luận

Vậy, tóm lại:

  1. Grid sẽ chấp nhận các đơn vị linh hoạt trong việc kết hợp với các đơn vị đo lường cố định.
  2. Chúng ta không cần định nghĩa các gutter bên trong grid-template của chúng ta, thay vào đó chúng ta có thể sử dụng thuộc tính grid-gap.
  3. grid-gap có nghĩa là chúng ta ít giới hạn vị trí các phần tử grid của chúng ta-chúng ta có thể giao trách nhiệm nhiều hơn cho việc tự động sắp đặt.
  4. Hàm repeat() sẽ tiết kiệm thời gian cho chúng ta và giữ các stylesheet dễ dàng bảo trì.
  5. Đơn vị fr hay phân số là một cách mạnh mẽ để mô tả các grid template (mẫu).

Chúng ta đã đi một chặng đường dài trong chỉ hai hướng dẫn, nhưng bây giờ bạn là người tự hào vì một grid rất đơn giản và ngắn gọn! Trong bài hướng dẫn tiếp theo chúng ta sẽ tìm hiểu các grid area, xem xét từ khoá span và một số layout mang tính thực hành.

Các nguồn tài liệu hữu ích

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.