When designing beautiful and functional interfaces in Glide, especially when using Data Grid Collection components, one important setting that often goes unnoticed but can drastically affect layout is the width ratio.
This article will break down what the width ratio is, how it works, how you can use it to improve the look and usability of your app, and provide practical examples for better understanding.
What is the Data Grid Collection?
The Data Grid Collection component in Glide is a powerful layout element that displays data in a grid-like format, similar to a spreadsheet or table. It’s great for showing lists of records with multiple columns—like users, products, or inventory items—where each row is a record and each column is a piece of data.
For example, if you're displaying a list of products, your columns might be:
Product Name
Category
Price
Stock Level
In such cases, the layout and spacing of each column become critical to ensuring a good user experience.
What is Width Ratio?
Width ratio determines how much horizontal space each column takes up relative to the others. Think of it as defining the proportion of the available space that each column should occupy.
It’s not about fixed pixels or percentages. Instead, it’s a relative system—columns are compared to one another using the ratio numbers you assign.
Example:
Let’s say you have two columns:
Column A: width ratio = 1
Column B: width ratio = 2
This means:
Column A will take up 1 part of the total space.
Column B will take up 2 parts of the total space.
So, the space is divided into 3 equal parts:
Column A = 1/3
Column B = 2/3
This makes Column B appear twice as wide as Column A.
Real-World Use Cases
Use Case 1: Inventory Table
Column | Suggested Width Ratio |
Product Name | 3 |
Category | 2 |
Stock Level | 1 |
Here, the product name gets the most space so it's fully visible.
The category gets moderate space.
Stock level, which might be a short number or label, gets the least.
Use Case 2: Admin List
Column | Suggested Width Ratio |
Admin Name | 2 |
3 | |
Status | 1 |
This ensures that the email column (usually longer) gets more room than the name or status columns.
Tips for Using Width Ratio Effectively
Start with equal ratios, then adjust based on content.
If everything looks cramped or uneven, experiment by increasing the ratio for wider content.
Avoid very large differences (like 1 vs. 10), unless you specifically want one column to be barely visible.
Always preview your changes, especially for mobile devices—what looks good on a desktop might wrap awkwardly on smaller screens.
Combine with column alignment and formatting for a polished look.
Don’t confuse width ratio with column visibility. A low ratio doesn’t hide the column; it just shrinks its visible space.