How align paragraph children in grid layout? [duplicate]

Question

I have layout like image below:

The jsx/html code:

<article id="exhibition">
  <section>
    <a href="#">
      <h1>{exhibition[0].title}</h1>
      <p>{exhibition[0].description}</p>
    </a>
  </section>
  <section>
    <a href="#">
      <h1>{exhibition[1].title}</h1>
      <p>{exhibition[1].description}</p>
    </a>
  </section>
  <section>
    <a href="#">
      <h1>{exhibition[2].title}</h1>
      <p>{exhibition[2].description}</p>
    </a>
  </section>
</article>

css code:

article#exhibition {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;

  & section {
    padding: 1rem;
    background-color: #61C9A8;

    & a {
      font-weight: 400;
    }

    & h1 {
      font-size: 2rem;
      color: #4C3B4D;
    }

    & p {
      margin-top: 1.5rem;
      font-size: 1.5rem;
    }
  }
}

I want the description in the paragraph should be aligned with the other paragraph, but I have no idea how to do that. What should I change in my css grid (importantly the paragraph tags)?

Ori Drori · Accepted Answer · 2025-08-16 12:30:02Z

1

Set the section elements display property to subgrid and grid-template-rows: subgrid. The should also span 2 rows. In addition change the a elements display to contents, so they would be ignored by the layout.

article#exhibition {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;

  & section {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    padding: 1rem;
    background-color: #61C9A8;

    & a {
      display: contents;
      font-weight: 400;
    }

    & h1 {
      font-size: 2rem;
      color: #4C3B4D;
    }

    & p {
      margin-top: 1.5rem;
      font-size: 1.5rem;
    }
  }

<article id="exhibition">
  <section>
    <a href="#">
    <h1>Summer Holiday Activities</h1>
    <p>Join our family-friendly events, hands-on workshops, guided tours, and fun dino-themed experiences this Summer Holiday.</p>
  </a>
  </section>

  <section>
    <a href="#">
    <h1>The Science of Nature</h1>
    <p>Explores how the natural world works, from the smallest living organisms to vast ecosystems.</p>
  </a>
  </section>

  <section>
    <a href="#">
    <h1>Save our Earth</h1>
    <p>Help us to save the Earth from pollution, climate change, and environmental damages.</p>
  </a>
  </section>
</article>

answered Aug 16 at 12:30

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ori Drori Aug 17 at 8:21

You're welcome :)

Collectives™ on Stack Overflow

How align paragraph children in grid layout? [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related