Cách CSS Gap thêm không gian để nâng cao bố cục web

Đường dẫn nhanh

⭐Khoảng cách là gì?

⭐Cách viết thuộc tính khoảng cách CSS

⭐Sử dụng khoảng trống Với Flexbox

⭐Sử dụng khoảng cách với Grid

⭐Sử dụng khoảng trống với bố cục nhiều cột

Bài học chính

Thuộc tính CSS gap đóng vai trò như một phương tiện có thể thích ứng để mô tả mối quan hệ giữa các không gian giữa các thành phần thiết kế khác nhau trong bố cục của trang web.

Thuộc tính “gap” cung cấp một phương tiện thuận tiện để chỉ định cả khoảng cách ngang và dọc bằng cách chỉ định các giá trị riêng biệt cho các hàng và cột tương ứng.

Việc sử dụng phần tử void tương thích với các hệ thống bố cục CSS khác nhau như sắp xếp Flexbox, Grid và Multi-column.

Cascading Style Sheets (CSS) cung cấp một loạt các phương pháp để sắp xếp vị trí các thành phần trong trang web, từ kỹ thuật định vị chính xác đến các thiết kế dựa trên lưới linh hoạt hơn. Điều quan trọng không kém cần xem xét là sự xen kẽ và phân bổ khoảng trắng xung quanh và giữa các thành phần này, có thể đạt được thông qua nhiều cách tiếp cận khác nhau. Một phương pháp như vậy là sử dụng thuộc tính khoảng cách, được biết đến với khả năng thích ứng trên các cấu hình cấu trúc đa dạng.

Khoảng cách là gì?

Trong lĩnh vực thiết kế trực quan, việc sử dụng khoảng trắng và thao tác thành thạo thuộc tính CSS “khoảng cách” là những nguyên tắc cơ bản để đạt được sự sắp xếp hợp lý về mặt chức năng và hấp dẫn về mặt thẩm mỹ. Việc áp dụng đúng đắn đặc tính có vẻ đơn giản này đóng vai trò là nền tảng để tạo ra các tác phẩm hài hòa gây được tiếng vang với người xem ở cả cấp độ nhận thức và cảm xúc.

Bạn có thể sử dụng thuộc tính này để chỉ định kích thước của các khoảng trống giữa các phần tử theo ba cách sắp xếp không gian riêng biệt:

⭐ Bố cục hộp linh hoạt (“Flexbox”)

⭐Bố cục lưới

⭐Bố cục nhiều cột

Tất cả các trình duyệt web hiện đại đều duy trì thuộc tính khoảng cách, đóng vai trò như một yếu tố bổ sung cho các đặc tính của mô hình hộp như lề và phần đệm.

Cách viết thuộc tính khoảng cách CSS

Cấu trúc cơ bản của thuộc tính khoảng cách có thể được biểu diễn như sau:

 gap: <row-gap> <column-gap>;

Mỗi giá trị có thể bao gồm một phép đo hoặc một tỷ lệ và tùy chọn khoảng cách hàng hoặc cột. Khi không có khoảng trống nào được chỉ định, một con số đơn độc sẽ chi phối cả số hàng và số cột. Do đó, người ta có thể gặp phải các cấu hình sau:

 gap: 10em; 

Điều này ngụ ý rằng cả hàng và cột sẽ có khoảng cách gấp mười lần cỡ chữ hiện tại.

 gap: 20px 10%; 

Việc triển khai sẽ tạo ra khoảng cách 20 đơn vị theo hướng ngang (hàng) và khoảng cách bằng 1/10 chiều rộng của phần tử kèm theo theo hướng dọc (cột).

Khi sử dụng các phần tử vùng chứa cho mục đích bố cục, bạn nên sử dụng các khoảng trống thay vì kết hợp các phần tử cách nhau riêng lẻ trong các vùng chứa nói trên. Cách tiếp cận này tìm cách thiết lập khoảng cách nhất quán giữa các mục, trái ngược với việc tạo ra các biến thể phức tạp và không nhất quán về khoảng cách.

Sử dụng khoảng cách với Flexbox

Bạn có thể sử dụng thuộc tính “khoảng cách” trong bố cục linh hoạt để điều chỉnh khoảng cách giữa các hàng và cột, theo hướng của bố cục xác định loại khoảng cách nào có thể áp dụng; khoảng cách hàng hoặc khoảng cách cột.

Bố cục mặc định của một mục trong vùng chứa linh hoạt thường được sắp xếp cạnh nhau dọc theo trục chính hoặc hướng hàng khi không có hướng dẫn cụ thể nào được cung cấp. Điều này có thể đạt được với kiểu dáng tối thiểu bằng cách sử dụng đoạn mã sau:

 .flex-layout {
    display: flex;
}

.flex-layout div {
    padding: 1em;
    margin: 10px;
    outline: 1px solid black;
} 

Tạo bố cục này:

Mỗi phần tử chứa trong vùng chứa chính sử dụng các thuộc tính mô hình hộp truyền thống, chẳng hạn như phần đệm và lề, để thiết lập khoảng cách giữa chúng. Một sự tách biệt nhỏ được tạo ra bằng cách thêm một khoảng trống nhỏ bằng thuộc tính “gap” trong CSS.

 .flex-layout { gap: 20px; } 

Việc tăng khoảng cách giữa các mục linh hoạt sẽ tạo ra khoảng cách giữa mỗi mục, đồng thời không để lại khoảng trống bổ sung xung quanh các mục riêng lẻ.

Khi bố cục linh hoạt được sử dụng để hiển thị các phần tử trải rộng trên nhiều cột cũng như hàng bằng cách sử dụng các kỹ thuật như gói, nó có thể được coi là hiển thị các mục theo cả hai hướng. Kiểu sắp xếp này cho phép sử dụng không gian hiệu quả trong khi vẫn duy trì vẻ ngoài ngăn nắp.

 .flex-layout {
    gap: 20px 40px;
    flex-wrap: wrap;
} 

Bạn sẽ thấy tác dụng của cả hai khoảng trống:

Khi xem xét cách sắp xếp các thành phần trong một bố cục, điều quan trọng cần lưu ý là các thuộc tính như lề và nội dung căn đều có thể ảnh hưởng đến việc phân bổ không gian giữa các thành phần riêng lẻ. Về vấn đề này, thuộc tính gap nên được xem như một phép đo cơ bản, với sự hiểu biết rằng các yếu tố khác có thể ảnh hưởng đến khoảng cách tổng thể. Điều cần thiết là không nên cho rằng chỉ thiết lập gap sẽ cung cấp khả năng kiểm soát hoàn toàn đối với vị trí của các phần tử, mà phải xem xét cách các thuộc tính có liên quan khác tương tác và góp phần xác định kết quả cuối cùng.

Sử dụng khoảng cách với lưới

Bạn cũng có thể sử dụng các khoảng trống kết hợp với bố cục Lưới, mặc dù có một số điểm khác biệt cần cân nhắc khi thực hiện việc đó. Thông thường, sẽ cần phải chỉ định cả khoảng cách hàng và cột do thực tế là Grid được trang bị tốt hơn cho việc sắp xếp đa chiều.

Bố cục lưới cũng thể hiện xu hướng cố hữu là căn chỉnh các phần tử liền kề nhau, có thể được sửa đổi thông qua việc sử dụng các điều chỉnh biên và đệm trong lòng.

 .grid-layout {
    display: grid;
    grid-template-columns: 100px 80px 100px;
}

.grid-layout div {
   padding: 1em;
   margin: 10px;
   outline: 1px solid black;
} 

Kết quả là một bố cục lưới điển hình:

Thêm một khoảng cách:

 €‹.grid-layout {
    gap: 80px 40px;
} 

Sẽ chèn khoảng trắng giữa mỗi mục:

Hãy xem xét tác động của các giá trị khoảng cách hàng và cột riêng biệt trong việc tạo khoảng trống có chiều rộng gấp đôi chiều rộng của các cột ngăn cách khoảng cách trong khi vẫn duy trì tính nhất quán về khoảng cách giữa cả hàng và cột. Hãy nhớ lại rằng khi sử dụng một giá trị thống nhất, nó sẽ xác định khoảng cách chung giữa các hàng và cột.

Sử dụng khoảng trống với bố cục nhiều cột

Các cột trong bố cục cột cũng có thể sử dụng thuộc tính khoảng cách để tạo khoảng cách giữa các cột. Tuy nhiên, khi sử dụng bố cục một giá trị, chỉ có một giá trị khoảng trống được áp dụng và nó áp dụng cho tất cả các cột chung thay vì riêng lẻ cho từng hàng. Bố cục nhiều cột dựa trên cột có một khoảng cách mặc định cố hữu xác định khoảng cách giữa chúng.

 .column-layout {
    column-count: 3;
} 

Việc đo kích thước phông chữ được biểu thị bằng đơn vị em, tương ứng với kích thước phông chữ của phần tử gốc. Đơn vị em bằng kích thước phông chữ hiện tại của phần tử gốc nhân với một. Do đó, nếu phần tử gốc có kích thước phông chữ là 16 pixel thì đơn vị em sẽ tương đương với 16 pixel hoặc khoảng 0,375 inch.

Hiện tượng này trở nên rõ rệt hơn khi thay đổi kiểu chữ và đặc biệt là khi căn chỉnh nội dung dọc theo các cạnh của nó:

 .column-layout {
    font-size: 14pt;
    line-height: 1.4;
    text-align: justify;
} 

Việc ghép các câu nói trên dẫn đến định dạng chồng chéo và tắc nghẽn, có thể cản trở mức độ dễ đọc và gây khó chịu khi nhìn chăm chú.

Việc tăng khoảng cách giữa các cột bằng cách xác định một lề cụ thể cho phép cải thiện sự liên kết trực quan và không gian thở, giúp nâng cao khả năng đọc và tính thẩm mỹ tổng thể của thiết kế.

 .column-layout {
    gap: 2em;
} 

Bạn có thể phát hiện ra rằng việc sử dụng các kích thước phông chữ như 2em hoặc 3em có thể mang lại kết quả dễ đọc hơn, có tính đến các cân nhắc bổ sung như kích thước chiều rộng cột của bạn.

Việc sử dụng công cụ dựa trên trình duyệt, chẳng hạn như những công cụ có sẵn trong Công cụ dành cho nhà phát triển của Google Chrome, cung cấp một phương tiện hiệu quả để kiểm tra bố cục của một người và quan sát cách các thuộc tính cụ thể, bao gồm khoảng cách và lề, tác động đến giao diện tổng thể của nó.

Khi sử dụng các giá trị kép cho khoảng cách, hãy đảm bảo rằng chúng được sắp xếp theo cách thích hợp. Mặc dù cách sắp xếp “hàng, cột” có vẻ phản trực giác nhưng nó phù hợp với thứ tự của các thuộc tính phím tắt bổ sung như phần đệm và lề.

Gap là một công cụ linh hoạt có thể được áp dụng theo nhiều cách khác nhau dựa trên yêu cầu thiết kế cụ thể của dự án của bạn. Tuy nhiên, chức năng chính của nó vẫn nhất quán trên tất cả các ứng dụng-cung cấp khoảng cách đồng đều giữa các thành phần trong khi vẫn duy trì vẻ ngoài gọn gàng và ngăn nắp.