ionic-team / ionic-team/ionic-framework
feat: Add row-gap/column-gap (gutters) to ion-grid/ion-row
- Lenguaje dominante
- TypeScript
- Estrellas
- 52.7k
- Forks
- 13.3k
- Merge medio
- 1 d 15 h
- PR fusionados (30 d)
- 51
Descripción
### 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_
Guía de contribución
Evaluación
Este issue todavía no se ha evaluado.