Okay, after reading the MDN reference, I found the answer! The key to dynamic rows (or columns) is the repeat property. const COLORS = [ ‘#FE9’, ‘#9AF’, ‘#F9A’, “#AFA”, “#FA7” ]; function addItem(container, template) { let color = COLORS[_.random(COLORS.length – 1)]; let num = _.random(10000); container.append(Mustache.render(template, { color, num })); } $(() => { const … Read more
For a vertically-flowing grid that creates new columns as necessary, and rows are not defined, consider using CSS Multi-Column Layout (example). CSS Grid Layout (at least the current implementation – Level 1) cannot perform this task. Here’s the problem: In CSS Grid Layout, there is an inverse relationship between the grid-auto-flow and grid-template-rows / grid-template-columns … Read more
TL;DR grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; The common answer of repeat(3, 1fr) is not quite correct. This is because 1fr is about the distribution of available(!) space. This breaks as soon as the content becomes bigger than the track size. By default, it does not overflow and adjust the column width accordingly. That’s why not … Read more
Short Answer If the goal is to create a grid with equal height rows, where the tallest cell in the grid sets the height for all rows, here’s a quick and simple solution: Set the container to grid-auto-rows: 1fr How it works Grid Layout provides a unit for establishing flexible lengths in a grid container. … Read more
2021 Update CSS Grid Layout Level 3 includes a masonry feature. Code will look like this: grid-template-rows: masonry grid-template-columns: masonry As of March 2021, it’s only available in Firefox (after activating the flag). https://drafts.csswg.org/css-grid-3/#masonry-layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout end update; original answer below Flexbox A dynamic masonry layout is not possible with flexbox, at least not in a … Read more
Use either auto-fill or auto-fit as the first argument of the repeat() notation. <auto-repeat> variant of the repeat() notation: repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? ) auto-fill When auto-fill is given as the repetition number, if the grid container has a definite size or max size in the relevant … Read more
By default, a grid item cannot be smaller than the size of its content. Grid items have an initial size of min-width: auto and min-height: auto. You can override this behavior by setting grid items to min-width: 0, min-height: 0 or overflow with any value other than visible. From the spec: 6.6. Automatic Minimum Size … Read more
This answer has two main sections: Understanding how alignment works in CSS Grid. Six methods for centering in CSS Grid. If you’re only interested in the solutions, skip the first section. The Structure and Scope of Grid layout To fully understand how centering works in a grid container, it’s important to first understand the structure … Read more