<div class="gallery">
  <img src="path/to/your/image-1.jpg" alt="A vibrant abstract painting">
  <img src="path/to/your/image-2.jpg" alt="A serene mountain landscape">
  <img src="path/to/your/image-3.jpg" alt="A bustling city street at night">
  <img src="path/to/your/image-4.jpg" alt="A close-up of a dew-covered leaf">
  <img src="path/to/your/image-5.jpg" alt="A minimalist architectural detail">
  <img src="path/to/your/image-6.jpg" alt="A playful golden retriever">
  <!-- Add as many images as you like! -->
</div>

.gallery {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
}

2. grid-template-rows: repeat(2, 1fr);

This is the first part of our secret sauce. We are explicitly defining the track for our rows. Here's the breakdown:

• grid-template-rows: The property for defining the rows of our grid.
• repeat(2, ...): A handy function that says, "I want to create 2 of the following track definition."
• 1fr: The "fractional unit." This tells the grid to give each of our two rows an equal share of the available vertical space in the container. So, each row will be 50% of the container's height.

We've now locked in our two-row structure. But if you check your browser, it might not look right yet. By default, Grid fills rows first. That's where the final piece of the puzzle comes in.

3. grid-auto-flow: column;

This is the hero property. By default, grid-auto-flow is set to row, meaning Grid places items along the row axis, and when it runs out of space, it wraps to a new row. By changing it to column, we flip that logic on its head.

Now, Grid will place items along the column axis first. It will place the first image in row 1, the second image in row 2, and then—since it has filled the defined rows—it will automatically create a new column and place the third image in row 1 of that new column, and so on.

Imagine a newspaper layout. Instead of writing a line left-to-right and then starting a new line below, you're filling a column from top-to-bottom and then starting the next column over. That's exactly what grid-auto-flow: column does for our layout.

Polishing the Layout for a Professional Look

Our core logic is working, but the gallery probably looks a bit raw. The images might be squished, touching each other, and distorting to fit their cells. Let's add some essential finishing touches.

Adding Space with `gap`

Forget setting margins on individual items. Grid has a beautiful `gap` property that handles all the spacing for you.

.gallery {
  /* ... other properties */
  gap: 1rem; /* or 16px, 1.5vw, etc. */
}

This single line adds a 1rem gutter between all our rows and columns. It's clean, simple, and far easier to manage than old-school margin hacks.

Responsive Columns with `grid-auto-columns`

Right now, our columns are created automatically, but their width is determined by the content. We can gain more control with the grid-auto-columns property. This lets us define the size for any columns that are implicitly created by grid-auto-flow.

.gallery {
  /* ... other properties */
  grid-auto-columns: minmax(250px, 1fr);
}

The minmax() function is another superpower. This rule tells the browser: "Make each auto-generated column at least 250px wide, but if there's extra space, let them grow to fill it equally (1fr)." This gives us responsive columns without a single media query!

Preventing Image Distortion with `object-fit`

Finally, our images might have different aspect ratios. To ensure they fill their grid cell without getting stretched or squashed, we'll apply some styles directly to the `img` tags.

.gallery > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

width: 100% and height: 100% make the image element fill its assigned grid cell. The magic is object-fit: cover;, which tells the image to cover the entire area, cropping itself either horizontally or vertically as needed to avoid distortion, just like background-size: cover.

The Final Code

Putting it all together, our complete, beautiful, and robust gallery code is remarkably concise.

/* The Gallery Container */
.gallery {
  display: grid;
  gap: 1rem;
  
  /* The Magic Sauce */
  grid-template-rows: repeat(2, 250px); /* Using a fixed height for rows */
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  
  /* Optional: for horizontal scrolling */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

/* The Gallery Items */
.gallery > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
}

Note: In this final version, I've updated grid-template-rows to a fixed height (e.g., 250px) and added `overflow-x: auto` for a common use-case: a horizontally scrolling gallery. The `scroll-snap` properties are a nice UX bonus, making the scroll behavior feel crisp. If you prefer a wrapping grid, you'd simply omit the `overflow` and `scroll-snap` properties and ensure your gallery container has room to grow.

Wrapping It Up

And there you have it. A perfectly structured, responsive, two-row gallery with an automatic number of columns, all powered by a few declarative lines of CSS Grid. This is the power of modern CSS: solving complex problems with simple, elegant, and readable code.

The next time you need a grid-like structure, especially one with a fixed number of rows or columns, reach for these properties. Experiment with them! Change grid-auto-flow back to row and define grid-template-columns instead. The concepts are transferable and will make you a more effective and efficient front-end developer. Now go build something amazing.