For the grid container, the size of one column will always depend on the size of the grid. For example, you have a 100x100 px grid with 2 columns, the grid will be divided into 2, each column taking a half of the space (with spacing specified in settings). You can of course take up a whole space with the element if needed.
You can modify the column set up in the grid container with system definer sizes like "small", "medium", "large" in the column spacing for example:
To clarify, my question was related to the list component, not the layout grid.
As it stands, the list component allows me to manually set the width of each column. However, this width can only be defined using a fixed size (like pixels), not percentages. This fixed sizing leads to two main issues:
On smaller screens: The content doesn't fit the screen width, resulting in the addition of a horizontal scrollbar.
On larger screens: There's excess white space to the right of the last column, as the columns do not expand to use the available width.
My goal is to have the column widths dynamically adjust to the screen size, utilizing percentages to ensure they fill the entire width of the list component, without unnecessary scrollbars or white space.
Is there a way to make the columns within the list component responsive, so that their widths adjust in proportion to the screen size, using percentages instead of fixed sizes?
Any guidance or suggestions on how to achieve this would be greatly appreciated.
