[css-grid] grid-template-rows / grid-template-columns does not recognise multiple values within repeat() notation when used with auto-fill

NEW
Unassigned

Status

()

P3
normal
2 years ago
25 days ago

People

(Reporter: kakyou_tensai, Unassigned)

Tracking

(Blocks: 1 bug, {DevAdvocacy})

53 Branch
DevAdvocacy
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [DevRel:P1])

Attachments

(1 attachment)

(Reporter)

Description

2 years ago
Created attachment 8839783 [details]
test.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3013.3 Safari/537.36

Steps to reproduce:

Create grid container with the following properties:
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px 25px);
  grid-auto-rows: 50px;
}


Actual results:

Firefox indicated that the value for grid-template-columns was invalid.


Expected results:

A grid with alternating columns of 50px and 25px should have been generated and fill up the available space before starting on the next row.
(Reporter)

Updated

2 years ago
OS: Unspecified → All
Hardware: Unspecified → All
(Reporter)

Updated

2 years ago
Summary: grid-template-rows / grid-template-columns does not recognise multiple values within repeat() notation when used with auto-fill → [css-grid] grid-template-rows / grid-template-columns does not recognise multiple values within repeat() notation when used with auto-fill

Updated

2 years ago
Blocks: 616605
Component: Untriaged → Layout
Product: Firefox → Core
Priority: -- → P3
Keywords: DevAdvocacy
Whiteboard: [DevRel:P1]

Comment 1

8 months ago
Wanted to mention my use case for this: https://codepen.io/kizu/pen/paayMm?editors=1100:

    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr) minmax(64px, 1fr));

This can be really useful when you need to have an even number of columns which take all the available space. Right now this works perfectly in Edge, has bugs in webkit/blink when used with `grid-gap`, and don't work at all in Firefox. I don't think there are any other ways to work around this, so having this feature would be really nice!

Updated

6 months ago
Duplicate of this bug: 1456504
Status: UNCONFIRMED → NEW
Ever confirmed: true

Comment 3

a month ago
This works in Chrome.  Any hope for a fix soon??
You need to log in before you can comment on or make changes to this bug.