ionic-team / ionic-team/ionic-framework

feat: Add row-gap/column-gap (gutters) to ion-grid/ion-row

Open
#26,661 5 comments 6 reactions 0 assignees View on GitHub
package: core type: feature request
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

`ion-grid` and related components don't provide an easy way to add space between items, something commonly found in other frameworks that have a layout grid, such as Bootstrap. Request is to add this.

### Describe the Use Case

It is very common in UI layouts to want items to size flush with the sides of their container while having space in-between them. This is not easy to do at all with ion-grid.

### Describe Preferred Solution

Leveraging existing sizing names, `tiny`, `small`, `medium`, etc.

``

Or

``

(Row gets row-gap because it can technically contain multiple rows)

### Describe Alternatives

The major problem with attempting add column gaps to ion-grid via custom styles in CSS, is that `ion-col` adds **inline styles** to size the width of the columns, which is horrible (refactor to set CSS variables instead please). It makes it impossible to identify the column size in a stylesheet to be able to work around it.

### Related Code

CSS

```
ion-row[column-gap] {
column-gap: var(--column-gap);
}
ion-row[column-gap] > ion-col {
/* Can't do anything here because ion-col uses inline styles to set widths */
}
ion-row[column-gap="small"] {
--column-gap: var(--ion-spacing-small);
}
ion-row[column-gap="medium"] {
--column-gap: var(--ion-spacing-medium);
}
```

Problem with this example, of course, is the inline styles on `ion-col` set a fixed width that cannot be modified because CSS cannot identify the original column size it was supposed to be.

I mean, some ugly hack like `ion-col[style*="4 / var(--ion-grid-columns"]` could be done, but that is just working around the current implementation; targeting attributes like this is extremely non-performant.

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.