With CSS grid you can consider the use of max(width, 100%/N) where N is the maximum number of columns. If the width of the container increases, 100%/N will for sure be bigger than width, thus we won’t have more than N elements per row. .grid-container { –n: 4; /* The maximum number of columns */ … Read more
Is there any grid trick I can do to achieve this, grid-row-gap only seems to take one value, which it uses for all rows. With the grid-row-gap, grid-column-gap and grid-gap properties, you cannot apply different widths to different gaps. Like you noted, only one value can be used for each axis: One for row gaps … 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
The vertical gaps are caused by the images not filling the vertical space in the grid items. The problem is made worse with align-items: center on the container, which removes the align-items: stretch default. Essentially, there are no gaps between grid items. They form a clean, neatly-arranged grid. But because the images are smaller than … Read more
Adding grid-template-rows: 1fr min-content; to your .grid will get you exactly what you’re after :). .grid { display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: 1fr min-content; grid-template-areas: “one two” “one three” } .one { background: red; grid-area: one; padding: 50px 0; } .two { background: green; grid-area: two; } .three { background: blue; grid-area: three; } … 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
The grid-column and grid-row shorthand properties count grid lines. You wrote: For single span columns I can use grid-column: 1/1 This doesn’t make any sense. It resolves to: grid-column-start: 1 grid-column-end: 1 So you’re defining a column that goes from the starting line to the starting line. A column has a starting line and an … Read more
You can use grid-template-rows: 1fr 1fr 1fr and more importantly you have to reset the min-width and min-height values of the grid items which defaults to auto (as much as the content). To provide a more reasonable default minimum size for grid items, this specification defines that the auto value of min-width/min-height also applies an … Read more
Grid Layout provides multiple methods for re-arranging grid items. I’ve listed four below. The grid-template-areas property Line-based placement The order property The dense function of the grid-auto-flow property. (Possibly the simplest, easiest and most robust solution for this type of layout, as it works for any number of grid items.) Here’s the original layout: grid-container … Read more
I understand that you are seeking an answer that doesn’t involve HTML Tables or CSS Grid Layout. You mention that you don’t want Grid because of weak browser support. However, around the same time you posted your question, most major browsers released new versions which provide full support for Grid Layout (see details below). CSS … Read more