Lý do bạn nên sử dụng CSS Grid

Lý do bạn nên sử dụng CSS Grid

Bắt đầu với kết luận đầu tiên: CSS Grid là hệ thống bố cục tốt nhất mà các nhà thiết kế và các nhà phát triển UI cần. Nó không phải là một plug-in hay chỉ là một vài framework div soup khác, như Bootstrap. Nó là một công cụ lập bản đồ mà bạn có thể sử dụng tự do trong mọi trình duyệt hiện đại.

Nó là real grid
Nếu bạn đã quen với Bootstrap và phiên bản grid của nó, thì trước tiên bạn cần phải quên nó đi. Nó thậm chí không gần với CSS Grid. Grid của Bootstrap chỉ hoạt động theo chiều ngang và không có khả năng tiếp cận các đơn vị above hoặc below. Vì vậy, thực sự nó không thể tạo ra hình vuông kết nối hoặc hình chữ nhật. Bất kỳ hai bộ phận không thể kết nối với nhau nếu chúng nằm ở các hàng khác nhau theo chiều dọc. Điều này là bởi vì những item không biết liệu chúng có ở gần hay không. Và đơn giản bởi vì bạn không thể tạo ra một đoạn code kết nối chúng thực sự. Các developer có thể cố gắng tạo ra các lôgic để ràng buộc chúng, nhưng những điều này luôn luôn có giới hạn.

Khi các developer frontend muốn thực hiện một cách bố trí, họ sử dụng các div lồng nhau để chia hàng thành nhiều phần. Và khi họ làm điều này thì HTML trở nên phức tạp và khó có thể đọc được. Nếu họ vẫn sử dụng với HTML này, họ sẽ phải đối mặt với các vấn đề khác: Những div này thuộc về những địa điểm bị giới hạn của họ. Vì vậy, khu vực không thể thay đổi một cách dễ dàng, và cách duy nhất để làm điều đó là làm nó với javascript hoặc với CSS.

CSS Grid cung cấp các khu vực bằng cách vẽ đường cắt ngang thay vì các vùng ngang. Bạn có thể vẽ các đường thẳng đứng và ngang và đặt bất kỳ bộ phận nào bên trong chúng. Đó là bloating pad trước khi chia thực sự của bạn. Bạn có thể xác định vị trí của bạn giữa các dòng này.

1_BA2MTo5mmoLeqgN4slkqBQ.png

Các khu vực của CSS Grid có thể có các hình dạng khác nhau
Hãy tưởng tượng với bản đồ, nếu bạn muốn xác định vị trí của mình thì bạn sử dụng tọa độ. Bằng cách sử dụng các con số, bạn có thể xác định vị trí và theo dõi chuyển động của mình. CSS Grid cung cấp loại grid này và bạn có thể xác định vị trí bất kỳ item bất cứ khi nào bạn cần một hình dạng yêu cầu. Nó giống như vẽ hình dạng đồ thị bằng laptop. Bạn nhìn thấy các đường, các cạnh và các điểm.

Vì vậy, bạn có thể tạo ra một dynamic system các khu vực khác nhau. Bạn cần phải xác định border của từng khu vực và đưa nội dung vào đó. Bạn có thể cung cấp các layout responsive khác nhau cho các màn hình khác nhau.

Làm các layout khác nhau giống như bạn đang ở trên sao Hỏa lần đầu tiên, bạn không biết gì về môi trường. Bạn cần phải suy nghĩ khác với trái đất và phát triển những ý tưởng mới. Đó là câu đố ưa thích mà chúng ta cần phải giải quyết thật sự nhưng nó không phải dễ dàng. Cung cấp một hệ thống thiết kế mạnh mẽ và tương tự với khuôn khổ ngày nay đó là một con đường an toàn. Nhưng ngày càng có nhiều người sẽ trải nghiệm đồ chơi mới và sẽ tạo ra các khuôn khổ tùy chỉnh cho các nhóm của họ.

Nếu bạn tạo ra một trang web có hơn một trăm trang để duy trì, bạn cần phải tạo ra một hệ thống thiết kế phù hợp. Bạn cần phải tạo ra một hệ thống thiết kế mạnh mẽ. Việc tạo ra một hệ thống thiết kế với CSS Grid có thể là đề tài khó nhưng nó hứa hẹn một vùng đất mới mà chúng ta chưa từng có trước đây trên web.

Đã đến lúc suy nghĩ lại về cách trang web sẽ được thiết kế
Các hệ thống thiết kế làm cho các trang web gọn gàng và người dùng có thể sử dụng trang web dễ dàng hơn bao giờ hết. Tất cả mọi thứ được đặt cẩn thận, và điều này làm cho tất cả các trang web tương tự như nhau.

CSS Grid tương đối mới. Càng có nhiều kinh nghiệm, càng tạo ra những trải nghiệm mới. Đó là một cấp độ hoàn toàn mới cho người dùng, cho internet và cho các nhà thiết kế. Nó tạo ra một biên giới mới, một mở rộng mà chúng ta không có trước đó. Và chúng ta cần tìm những kinh nghiệm mới. Các nhà thiết kế có thể không học code CSS nhưng họ cần phải hiểu CSS Grid để đối phó với những người khác.


PVS - Theo Medium​
 
  • Like
Reactions: THB

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom