CSS
Horizontal Auto-Placement with `grid-auto-flow: column`
Arrange grid items horizontally first using `grid-auto-flow: column`, ideal for gallery-like layouts where items fill columns before wrapping to new rows.
.horizontal-gallery {
display: grid;
grid-auto-flow: column; /* Place items column by column */
grid-template-rows: repeat(auto-fill, minmax(150px, 1fr)); /* Fill rows with items of at least 150px height */
gap: 15px;
height: 400px; /* Define a fixed height to see column flow */
overflow-x: auto; /* Enable horizontal scrolling if items exceed width */
padding: 15px;
border: 1px solid #eee;
}
.gallery-item {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: 10px;
text-align: center;
display: flex; /* For centering content within item */
justify-content: center;
align-items: center;
font-size: 1.2em;
min-width: 150px; /* Ensure items have a minimum width */
}
How it works: This snippet uses `grid-auto-flow: column` to arrange grid items horizontally first. Instead of filling rows then moving to the next row, items will fill columns and then move to the next column. This is useful for designs where content should flow horizontally, perhaps requiring scrolling. `grid-template-rows` with `repeat(auto-fill, minmax(150px, 1fr))` ensures items can fill available rows vertically, while `overflow-x: auto` allows for horizontal scrolling if content overflows.