ionic-team / ionic-team/ionic-framework

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

Abierto
#26,661 5 comentarios 6 reacciones 0 asignados Ver en GitHub
package: core type: feature request
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

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.