Creating a Gallery Grid

Let's open the CSS tab and define a class as follows!

Copy
.gallery {
  display: grid;
  max-width: 1000px;
  margin: auto;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(280px, auto);
  grid-gap: 14px;
}

This code defines a CSS class named "gallery" as follows:

• display: grid;: Arranges elements with the "gallery" class in a grid layout

• max-width: 1000px;: Restricts the grid's maximum width to 1000 pixels

• margin: auto;: Centers the grid on the screen

• grid-template-columns: repeat(2, 1fr);: Specifies that the grid container contains 2 columns, each of equal width

• grid-auto-rows: minmax(280px, auto);: Sets the height for additional rows in the grid container. "minmax(280px, auto)" means the row height will be at least 280px and can grow automatically (auto) beyond that if needed. This ensures that even if a grid item is shorter, it maintains at least 280px height, and if it exceeds, it adjusts automatically.

• grid-gap: 14px;: Sets the gap between grid items to 14 pixels.

Let's place 4 images inside the grid container like below.

Copy
<div class="gallery">
  <img
    src="https://images.pexels.com/photos/376464/pexels-photo-376464.jpeg"
    width="100%"
    height="100%"
    alt="Item 1"
  />

  <img
    src="https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg"
    width="100%"
    height="100%"
    alt="Item 2"
  />

  <img
    src="https://images.pexels.com/photos/1099680/pexels-photo-1099680.jpeg"
    width="100%"
    height="100%"
    alt="Item 3"
  />

  <img
    src="https://images.pexels.com/photos/958545/pexels-photo-958545.jpeg"
    width="100%"
    height="100%"
    alt="Item 4"
  />
</div>

As defined by the "gallery" class, the line grid-template-columns: repeat(2, 1fr); creates a two-column grid, with each row containing images set to a minimum height of 280px.

Now, if you change "grid-template-columns: repeat(2, 1fr);" to repeat(4, 1fr), the number of columns will increase from 2 to 4!

Next, changing "grid-auto-rows: minmax(280px, auto);" from minmax(280px, auto) to minmax(140px, auto) will reduce the grid items' height from 280px to 140px, which is half the original value.

Finally, altering "grid-gap: 14px;" from 14px to 28px will increase the spacing between grid items.