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

Open
plinss opened this issue Oct 23, 2018 · 0 comments
Open

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

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

Comments

@plinss
Copy link
Member

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.

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

2 participants