Skip to content

[css-grid-2] option to specify an optional sequence of track sizes #3328

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pmccloghrylaing opened this issue Nov 16, 2018 · 2 comments
Open
Labels
css-grid-3 Masonry Layout

Comments

@pmccloghrylaing
Copy link

pmccloghrylaing commented Nov 16, 2018

Spec: https://www.w3.org/TR/css-grid-1/#auto-repeat

In a number of scenarios flexbox and grid are able to respond to their content and container to achieve layouts that people want container queries for (which seem unlikely to happen). Being able to define a completely collapsible sequence of tracks would allow things like switching from a layout of X columns * 1 row to 1 column wide * X rows depending on the size of the container. In my case I'm looking at ways to switch between a 3×1 and 1×3. This would also allow things like odd numbers of columns/rows down to 1 instead of 3.

This could work with repeat so it could be used with auto-fill/fit, maybe as an additional keyword - repeat(3 optional, ...) or repeat(auto-fit optional, ...)?

@tabatkins tabatkins added the css-grid-2 Subgrid; Current Work label Nov 16, 2018
@tabatkins
Copy link
Member

Is the proposal here to have an "all or nothing" repetition? I'm not totally sure I understand.

@pmccloghrylaing
Copy link
Author

My original thought was wanting auto-fill (and auto-fit) to be able to work as "0 or more" repetitions instead of "1 or more".

That seems really powerful to me, mainly for defining components that can be laid out horizontally or vertically.

An example of this could be a sign in form that appears in different contexts (with different container widths) that should be either:

+---------------+---------------+---------------+
| Username      | Password      | Log In        |
+---------------+---------------+---------------+

or:

+---------------+
| Username      |
+---------------+
| Password      |
+---------------+
| Log In        |
+---------------+

but not:

+---------------+---------------+
| Username      | Password      |
+---------------+---------------+
| Log In        |               |
+---------------+---------------+

@fantasai fantasai added css-grid-3 Masonry Layout and removed css-grid-2 Subgrid; Current Work labels May 27, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-grid-3 Masonry Layout
Projects
None yet
Development

No branches or pull requests

3 participants