Skip to content
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

[css-grid] 'auto' keyword should work with name grid lines/areas #3243

plinss opened this issue Oct 23, 2018 · 0 comments

[css-grid] 'auto' keyword should work with name grid lines/areas #3243

plinss opened this issue Oct 23, 2018 · 0 comments
css-grid-3 Masonry Layout


Copy link

plinss commented Oct 23, 2018

Consider the sample grid:

grid-template-columns: 1fr repeat(4, [icon-start] auto [icon-end] 1fr);
grid-template-rows: [icon-start] auto [icon-end];

With an image:

img { grid-area: icon; }

And the markup:

<img src=icon1.png>
<img src=icon2.png>
<img src=icon3.png>
<img src=icon4.png>

All four images will be placed into the first 'icon' grid area, and require specific style rules to target the other grid areas. It would be useful to be able to use the auto placement algorithm but target specific named grid lines/areas, e.g:

img { grid-area: icon auto; }

and have each image be placed in the first unoccupied 'icon' grid area.

@plinss plinss added the css-grid-2 Subgrid; Current Work label Oct 23, 2018
@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
css-grid-3 Masonry Layout
None yet

No branches or pull requests

2 participants