Tại sao UI Designers cần phải biết code cụ thể là Flexbox và CSS Grid

Hầu hết các designer đều quen thuộc với Responsive design (thiết kế đáp ứng) - cách tiếp cận layout dạng cột với các breakpoint cố định. Tuy nhiên, đã đến lúc chúng ta tìm hiểu về layout CSS hiện đại. Đây chính là giải pháp tuyệt vời để tạo ra các thiết kế layout linh hoạt và phù hợp với nhiều kích thước màn hình khác nhau.

Bài viết hôm nay chúng ta sẽ cùng nhau tìm hiểu về:

• Thiết kế dạng cột so với CSS hiện đại
• Tìm hiểu về CSS Flexbox
• Tìm hiểu về CSS Grid
• Breakpoints: Chúng ta có còn cần chúng không?

1. Column-based design - Thiết kế dạng cột truyền thống với frameworks

Với vai trò là UI designer, bạn có thể quen thuộc hơn với thiết lập dạng cột cổ điển (traditional column-based design). Dạng lưới này đóng vai trò là nền tảng cho thiết kế của bạn, cung cấp framework để bạn tạo ra layout mong muốn.

Chức năng của Breakpoint

Bản chất của Responsive design nằm ở các breakpoint, được xác định bằng các truy vấn CSS và đóng vai trò rất quan trọng trong việc điều chỉnh bố cục cho phù hợp với các kích thước màn hình khác nhau. 

Cấu trúc của trang web sẽ tự động điều chỉnh tại các breakpoint này: các thành phần có thể được sắp xếp lại, menu điều hướng có thể mở rộng hoặc kích thước văn bản có thể được thay đổi để cải thiện khả năng đọc. Tính linh hoạt này giúp đảm bảo thiết kế luôn có đủ chức năng cũng như tính thẩm mỹ khi hiển thị trên các thiết bị.

Frameworks CSS phổ biến

Khi triển khai dạng thiết kế này, các framework CSS như Bootstrap hoặc Foundation sẽ là sự lựa chọn phổ biến. Tailwind cũng là cái tên mà bạn có thể đã nghe qua. Những framework này cung cấp các thành phần được thiết kế và hệ thống lưới có sẵn nhằm đơn giản hóa quá trình tạo layout cho responsive web (trang web đáp ứng).

2. Modern CSS Layout - Bố cục CSS hiện đại

Layout CSS hiện đại với Flexbox và CSS Grid có thể giúp các thiết kế không chỉ thích ứng với kích thước khung hình, mà còn phù hợp với chính nội dung và không gian có sẵn. Phương pháp này cho phép designer kiểm soát tốt hơn cách mà nội dung hoạt động khi không gian thay đổi. Nó kết hợp các yếu tố giữa cố định và linh hoạt, cung cấp không gian rộng rãi để tinh chỉnh, chẳng hạn như xác định kích thước tối thiểu và tối đa…

Công cụ gì đang được sử dụng?

Các công cụ CSS chính ở đây là Flexbox và CSS Grid. Chúng có thể được sử dụng riêng lẻ hoặc kết hợp với nhau. Designer có thể sử dụng các công cụ này để thiết lập các phần tử hoặc layout tổng thể.

3. Tìm hiểu về CSS Flexbox 

Với Flexbox, chúng ta có thể xếp các phần tử theo trình tự một cách gọn gàng, kiểm soát sự liên kết của chúng, đồng thời điều chỉnh kích thước của chúng để phù hợp với không gian màn hình. Chúng ta có thể sử dụng Flexbox để thiết lập các phần tử, nhóm hoặc trang.

CSS Flexbox hoạt động với hai phần tử chính: vùng chứa chính (parent container) và các phần tử con (child elements/ items)

Vùng chứa chính - Parent container

Parent container là trình bao bọc bên ngoài các phần tử con. Trong container này, bạn có thể tùy chỉnh sắp xếp các phần tử con cũng như kiểm soát hướng, căn chỉnh theo chiều ngang hoặc dọc… Nói một cách dễ hiểu, các item con bên trong sẽ hiển thị dựa vào thiết lập của parent container này.

Phần tử con - Child elements/ child items

Đây là các thành phần nằm bên trong parent container. Mặc dù hiển thị theo cài đặt của vùng chứa chính, nhưng bạn vẫn có thể thực hiện một số điều chỉnh đối với những phần tử này. Chẳng hạn như bạn có thể mở rộng một item để lấp đầy vùng chứa, làm chúng nhỏ lại khi không đủ không gian hoặc quay trở lại kích thước mặc định của chúng. Ngoài ra, designer còn có thể thiết lập một số cài đặt nâng cao khác như căn chỉnh các mục riêng lẻ khác với các mục còn lại.

Nesting Flexbox - Cấu trúc Flexbox theo dạng phân cấp

Bạn có thể thấy bên dưới là một Flexbox với thiết lập đơn giản: Card (tấm thẻ) là parent, và nó có ba phần tử con là image (hình ảnh), headline (tiêu đề) và text (chữ), tất cả đều cùng hướng, và khoảng cách giữa chúng cũng bằng nhau. Mọi thứ thật dễ dàng, phải không nào?

‍

Đối với các thiết kế phức tạp hơn, như điều hướng bên dưới với các thành phần khác nhau cần được nhóm lại, chúng ta cần nesting flexbox. Vì vậy, mỗi nesting flexbox sẽ là con của cha mẹ trực tiếp của nó và nhận được vị trí chung từ trên (như ở ví dụ bên dưới là thanh điều hướng “navbar”), đồng thời cũng đưa ra những thiết lập mới cho các con trực tiếp của nó. 

Figma có tự động tạo Layout Flexbox hay không?

Nó giống hệt như việc sử dụng bố cục tự động (auto layout) trong Figma hoặc bố cục flex (flex layout) trong Penpot vì cả hai đều phản ánh cơ bản về Flexbox. 

4. Tìm hiểu về Layout CSS Grid 

Flexbox là phương pháp thiết kế một chiều. Có nghĩa là mỗi phần tử được đặt trong một dòng. Điều đó hoàn toàn ổn trong nhiều trường hợp. Tuy nhiên, nếu bạn muốn kiểm soát thiết kế của mình theo dạng lưới hàng và cột, bạn sẽ cần học cách tiếp cận bố cục hai chiều như CSS Grid.

Không có cái nào là đúng hay sai ở đây cả! Quan trọng là bạn đang muốn thiết kế cái gì để lựa chọn loại layout phù hợp. 

Và với CSS Grid, bạn có thể thiết kế bất cứ thứ gì. Điều này thật điên rồ! Bạn có thể tạo ra layout đơn giản nhất, chẳng hạn như lưới cột cổ điển và sau đó điều chỉnh một cách linh hoạt để có được thiết kế sáng tạo vượt xa nhận thức về lưới tiêu chuẩn. 

Hãy tưởng tượng Flexbox như những hạt trên một sợi dây, theo chiều ngang hoặc chiều dọc. Khi đó CSS Grid giống như việc lấy các hạt ra khỏi dây và đặt chúng vào hộp bento. Và khi đó, bạn có thể tự do sắp xếp chúng theo cách bất kỳ mà bạn muốn. Và việc thiết kế layout lúc này giống như một hộp cơm bento thú vị, nơi bạn có thể di chuyển các ngăn và nối các ngăn lại với nhau. Thật tuyệt vời đúng không nào!

Tư duy theo đường lưới, không phải cột

Là một UI designer, có thể bạn sẽ coi layout grid (lưới bố cục) như một vùng chứa có các cột, sau đó đặt các phần tử lên trên hoặc ngang qua các cột này. Nhưng với CSS Grid thì hơi khác một chút. Chúng ta vẫn có một container, nhưng lưới được tạo thành từ các đường và tạo ra các ô lưới (grid cells). Các phần tử được đặt theo mặc định dựa vào thứ tự HTML của chúng. Tuy nhiên, chúng ta có thể kiểm soát vị trí ngang và dọc chính xác của chúng bằng các đường gióng tọa độ của CSS Grid.

Đơn vị FR trong thiết kế

Các cột và ô lưới (grid cells) không cần phải có cùng kích thước, chúng ta có thể tùy chỉnh chúng theo ý muốn. Bạn có thể sử dụng kích thước cố định hoặc sử dụng đơn vị “fr” - viết tắt của từ “fraction” (phân số). Đây là một kích thước mới được sử dụng trong grid. 

Bằng cách sử dụng đơn vị fr này, chúng ta có thể phân bổ đều phần không gian còn lại hoặc điều chỉnh theo tỷ lệ, ví dụ 2 fr cho một ô và 1 fr cho ô khác. 

Mọi thứ sẽ được điều chỉnh hoàn hảo khi kích thước thay đổi: các phần tử cố định vẫn duy trì kích thước của chúng, trong khi các đơn vị fr sẽ được phân phối lại sao cho phù hợp.

Explicit grids (lưới rõ ràng) và Implicit Grids (lưới ngầm định)

Với CSS grid, đôi khi bạn không cần phải xác định rõ ràng các hàng và cột; trình duyệt sẽ tự động tạo lưới dựa trên nội dung. Và đó chính là Implicit Grids. Dạng lưới này đặc biệt hữu ích khi xử lý nội dung động hoặc chưa xác định, chẳng hạn như danh sách các bài đăng trên blog hoặc sản phẩm thay đổi theo thời gian.

Và trong vai trò là một UI designer, bạn sẽ quen với việc tiếp cận Explicit Grids nhiều hơn vì Implicit Grids chủ yếu được chứng kiến trong hoạt động trình duyệt. Do vậy, chúng ta cần suy nghĩ rộng ra ngoài phần mềm UI và cộng tác với tư cách là nhà thiết kế và nhà phát triển.

Nesting - Phân cấp

CSS grid cũng có thể được phân cấp. Ví dụ: nếu bạn có layout tổng thể với tiêu đề, thanh bên và khu vực nội dung và muốn cấu trúc nội dung đó sâu hơn, bạn có thể dễ dàng lồng một CSS grid khác vào bên trong nó. Tùy thuộc vào yêu cầu của bạn, nesting CSS Grid này có thể được ẩn hoặc hiển thị. 

Để có thiết kế được căn chỉnh hoàn hảo, tính năng lưới con của CSS Grid cho phép bạn tạo cấu trúc lưới nhất quán trên toàn bộ layout của mình.

Sự sáng tạo nằm trong tầm tay bạn

CSS Grid mở ra những khả năng vô tận trong thiết kế. Nhưng điều quan trọng là phải tập trung và giữ mọi thứ đơn giản nhất có thể để tạo ra các sản phẩm có thể bảo trì và mở rộng, đó là điều chúng ta cần trong hầu hết các trường hợp. Do đó, trong nhiều dự án, bạn có thể chỉ muốn sử dụng một lưới dạng cột cơ bản và điều đó hoàn toàn ổn! Chúng ta có thể sử dụng các thiết lập đơn giản nhất với CSS Grid. Và khi cần, bạn hoàn toàn có thể làm bất cứ những gì mà sự sáng tạo kêu gọi.

Figma có tính năng CSS Grid không?

Figma có cung cấp tính năng lưới nhưng bị giới hạn ở các cột tiêu chuẩn. Mặc dù chúng tôi có bố cục tự động Flexbox, nhưng hiện tại, Figma thiếu một tính năng đại diện cho CSS Grid. Bạn cũng có thể muốn khám phá Penpot - một UI software miễn phí cung cấp cả tính năng Flexbox và CSS Grid. 

5. Nên chọn CSS Grid hay Flexbox?

Flexbox và CSS Grid đều là một phần của gia đình CSS và hoạt động rất hài hòa với nhau. Hầu hết các thành phần sẽ được thiết lập bằng Flexbox, trong khi CSS Grid sẽ kiểm soát layout tổng thể. Tuy nhiên, hoàn toàn có thể sử dụng Flexbox cho toàn bộ trang nếu cần. Đôi khi bạn cần sử dụng kết hợp; và lúc khác, chỉ một phương pháp CSS Grid hoặc Flexbox thôi sẽ là giải pháp ưu việt hơn. 

Nói tóm lại, không có sự lựa chọn đúng hay sai ở đây. Cả 2 dạng layout này bổ sung cho nhau một cách liền mạch. Việc layout một hay hai chiều hoạt động tốt hơn tùy vào từng dự án thiết kế của bạn.

6. Breakpoints có còn cần thiết nữa hay không?

Đối với thiết kế dạng cột truyền thống 

Hiện nay, chúng ta đã được nâng cấp lên một phiên bản mới. Tại các breakpoints, layout lưới có thể thay đổi từ số lượng cột cho đến gutter và margin. Chúng tôi cũng có thể sắp xếp lại cách các phần tử nằm trong lưới và hiển thị hoặc ẩn một phần tử cụ thể nào đó. 

Đối với CSS Grid hiện đại

CSS Grid cho phép bạn thiết kế một cách linh hoạt mà không cần liên tục có breakpoint. Điều này có nghĩa là layout có thể tự động tổ chức lại một cách hiệu quả trong nhiều trường hợp.

Tuy nhiên, vẫn có những lúc bạn thấy cần thiết phải sử dụng breakpoint. Thay vì dựa vào một tập hợp các breakpoint cố định, bạn có thể xác định các breakpoint này một cách linh hoạt hơn nhiều.

Bạn có thể muốn thêm breakpoint trong CSS Grid cho các trường hợp sau đây:

• Thay đổi layout: Mặc dù CSS hiện đại tự thực hiện công việc rất tốt, nhưng bạn có thể muốn đặt các breakpoint để thay đổi layout một cách cấp tiến hơn. Chẳng hạn như thay đổi thiết lập lưới, hiển thị hoặc ẩn các phần tử hoặc phân phối chúng một cách khác đi.
• Thay đổi layout thành phần (component layout): Một ví dụ có thể là sự thay đổi điều hướng một menu cụ thể sang menu liên kết. Bằng cách này, chúng ta có thể tìm thấy điểm thích hợp mà chúng ta muốn đặt breakpoint. Vấn đề này cũng có thể được giải quyết một cách dễ dàng bằng truy vấn container query.

• Thay đổi kiểu chữ: Đây là một vấn đề phức tạp hơn. Nói một cách ngắn gọn, bạn chỉ có thể đặt các breakpoint riêng lẻ ở đây, nhưng sẽ hợp lý hơn khi quay lại một tập hợp các breakpoint cố định cho kiểu chữ của bạn. Cách tiếp cận này hợp lý hóa quy trình, đảm bảo rằng kiểu chữ sẽ nhất quán và dễ đọc trên các kích thước màn hình khác nhau. 
• Những cách tiếp cận khác với CSS Clamp: Ngoài breakpoint, chúng ta cũng có thể sử dụng hàm Clamp trong CSS để cho phép kiểu chữ có tỷ lệ linh hoạt trong một phạm vi được chỉ định, đảm bảo khả năng thích ứng của nó trên màn hình hiển thị. Phương pháp này cho phép kích thước văn bản điều chỉnh giữa mức tối thiểu và tối đa, xem xét chiều rộng khung hình một cách độc lập với các breakpoint. Tuy nhiên, việc sử dụng hàm Clamp cần có sự cộng tác chặt chẽ với nhóm phát triển vì liên quan đến các vấn đề về hiệu suất và khả năng tiếp cận cần được xem xét cũng như thử nghiệm thêm. 

7. Tìm kiếm sự cân bằng: Thiết kế tự do và Thiết kế theo cấu trúc

Một thách thức mà bạn có thể đối mặt đó là tìm ra một vài trật tự trong vô số khả năng biến hóa với CSS Layout. Do vậy, bạn cần xem xét cẩn thận dự án cũng như phạm vi của nó để có sự lựa chọn phù hợp.

Thiết kế nghệ thuật cho các dự án hoặc hạng mục chỉ thực hiện một lần

Có phải bạn đang cố gắng tạo ra một trang web đầy tính nghệ thuật và thật lạ mắt? Vậy thì bạn sẽ muốn tận dụng toàn bộ sức mạnh của CSS Layout. Bạn có thể từ bỏ hoàn toàn các breakpoint truyền thống, sau đó để trình duyệt tự tạo ra layout hoặc xem xét tỉ mỉ breakpoint cho từng phần tử.

Hãy nhớ rằng phương pháp này có thể sẽ không áp dụng cho toàn bộ trang web; nó có thể chỉ dành cho trang chủ hoặc hero section.

Cân bằng tính linh hoạt và cấu trúc trong các hệ thống thiết kế và thiết kế có thể mở rộng

Tính linh hoạt là chìa khóa cho một sản phẩm có thể mở rộng, và cấu trúc cũng vậy. Mặc dù CSS hiện đại cho phép thiết kế linh hoạt hơn, nhưng việc tạo ra một thiết kế có thể mở rộng thường yêu cầu đặt ra các quy tắc rõ ràng hơn để giúp mọi thứ có thể quản lý được. 

Bạn có thể sử dụng các mẫu bố cục cố định trong Figma hoặc Penpot. Bạn có thể xem xét chọn một số breakpoint cố định cho tổng thể layout và kiểu chữ để làm cho mọi thứ thật đơn giản. Điều quan trọng là chúng ta vẫn có thể dễ dàng thoát ra khỏi hệ thống này bất cứ khi nào cần thiết.

Cuối cùng, một vấn đề mà bạn cần phải làm rõ: Bài viết này không nói về việc các nhà thiết kế cần viết mã. Đây là công việc của các chuyên gia front-end developers. Nhưng nếu bạn thiết kế với sự hiểu biết về các khả năng và hạn chế của CSS, thì rõ ràng chúng ta có thể làm việc và cộng tác tốt hơn, nhất là với các developer.

‍