Short Answer The problem is that Safari is not recognizing the height: 100% on the img elements. Explanation This is not a Safari bug. It’s just a different interpretation of the spec. When dealing with percentage heights, some browsers (like Safari) adhere to the traditional interpretation of the spec, which requires a defined height on … Read more
The second rule doesn’t work because min-content is an intrinsic sizing function. § 7.2.2.1. Syntax of repeat() Automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes. § 11. Grid Sizing An intrinsic sizing function (min-content, max-content, auto, fit-content()). A flexible sizing function [is a dimension with the fr unit].
Neither HTML or CSS have any concept of when descendants of a container wrap. Essentially, the browser renders the document during an initial cascade. It does not reflow the document when a child wraps. Therefore, to change the number of columns, you will need to set a width limit somewhere along the line or use … Read more
Without place-items: center; your grid items will get stretched to cover all the area (the default behavior in most of the cases) that’s why the background will the cover a big area: With place-items: center; your grid item will fit their content and they will be placed in the center; thus the background will cover … Read more
When using auto-fill or auto-fit, there must be a definite min-size or max-size. By “definite”, the spec means: A size that can be determined without measuring content. https://www.w3.org/TR/css-sizing-3/#definite When you set both minmax arguments to content-based size, like this: grid-template-columns: repeat(auto-fill, minmax(auto, 1fr)); … that’s a violation of the spec because there is no definite … Read more
Yes it’s by design as attr() is acutally only suppored with content. As defined in the current specification it’s a value for content. You can also read in MDN: Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter … Read more
When using division with calc the result will be a number and not an integer thus it won’t work because the repeat() expect an interger The generic form of the repeat() syntax is, approximately, repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )ref And At /, check that the right side is <number>. … Read more
Pseudo-elements are considered child elements in a grid container (just like in a flex container). Therefore, they take on the characteristics of grid items. You can always remove grid items from the document flow with absolute positioning. Then use CSS offset properties (left, right, top, bottom) to move them around. Here’s a basic example: html … Read more
I don’t see how this is possible with the current iteration of CSS Grid. As you’ve already discovered, you would at least need to define a fixed minimum width on the columns, in order to force a wrap at some point. Unfortunately, with automatic repetitions, the minimum length cannot be auto, min-content or max-content alone, … Read more
Considering your three requirements: A grid with a variable number of rows. Every row should have a variable size (auto will do). The last row should always take up all the remaining space. Flexbox is well-suited for the job. In fact, it may be the perfect fit (depending on your other requirements). I’ve provided a … Read more