CODEWITHSUNDEEP
htmlcsscss-grid
Nick87
Nick87

Reputation: 83

Aligning elements on CSS Grid Layout Cards

I found this interesting CSS Grid Layout for Cards from a site which is as well web responsive and mobile responsive but i am trying hard to make all the buttons to be aligned on the same line on each card even if the text of each card is not the same. Any ideas?

enter image description here

Below the code

    <!doctype html>
<title>Example</title>
<style>
.grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  }
.grid > article {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
}
.grid > article img {
  max-width: 100%;
}
.text {
  padding: 0 20px 20px;
}
.text > button {
  background: gray;
  border: 0;
  color: white;
  padding: 10px;
  width: 100%;
  }
</style>
<main class="grid">
  <article>
    <img src="/pix/samples/23m.jpg" alt="Sample photo">
    <div class="text">
      <h3>Seamlessly visualize quality</h3>
      <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
      <button>Here's why</button>
    </div>
  </article>
  <article>
    <img src="/pix/samples/24m.jpg" alt="Sample photo">
    <div class="text">
      <h3>Completely Synergize</h3>
      <p>Dramatically engage seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing.</p>
      <button>Here's how</button>
    </div>
  </article>
  <article>
    <img src="/pix/samples/22l.jpg" alt="Sample photo">
    <div class="text">
      <h3>Dynamically Procrastinate</h3>
      <p>Completely synergize resource taxing relationships via premier niche markets.</p>
      <button>Read more</button>
    </div>
  </article>
  <article>
    <img src="/pix/samples/15l.jpg" alt="Sample photo">
    <div class="text">
      <h3>Best in class</h3>
      <p>Imagine jumping into that boat, and just letting it sail wherever the wind takes you...</p>
      <button>Just do it...</button>
    </div>
  </article>
  <article>
    <img src="/pix/samples/25m.jpg" alt="Sample photo">
    <div class="text">
      <h3>Dynamically innovate supply chains</h3>
      <p>Holisticly predominate extensible testing procedures for reliable supply chains.</p>
      <button>Here's why</button>
    </div>
  </article>
  <article>
    <img src="/pix/samples/16l.jpg" alt="Sample photo">
    <div class="text">
      <h3>Sanity check</h3>
      <p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
      <button>Stop here</button>
    </div>
  </article>
</main>

I like how each card has the same size etc and definetely i can do a lot with some CSS transition properties like make the whole card to be full image and when you hover you can see the text on the card but out of curiosity i want to make these buttons aligned always on the bottom of the card.

Upvotes: 2

Views: 3390

Answers (2)

isherwood
isherwood

Reputation: 61079

Saved by the guide:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
}

.grid>article {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
  display: flex; /* <-------------- changes */
  flex-direction: column; /* <-------------- changes */
}

.grid>article img {
  max-width: 100%;
}

.text {
  padding: 0 20px 20px;
  flex-grow: 1;
  display: flex; /* <-------------- changes */
  flex-direction: column; /* <-------------- changes */
}

.text>p {
  flex-grow: 1; /* <-------------- changes */
}

.text>button {
  background: gray;
  border: 0;
  color: white;
  padding: 10px;
  width: 100%;
}
<main class="grid">
  <article>
    <img src="https://via.placeholder.com/300x100" alt="Sample photo">
    <div class="text">
      <h3>Seamlessly visualize quality</h3>
      <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
      <button>Here's why</button>
    </div>
  </article>
  <article>
    <img src="https://via.placeholder.com/300x100" alt="Sample photo">
    <div class="text">
      <h3>Completely Synergize</h3>
      <p>Dramatically engage seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing.</p>
      <button>Here's how</button>
    </div>
  </article>
  <article>
    <img src="https://via.placeholder.com/300x100" alt="Sample photo">
    <div class="text">
      <h3>Dynamically Procrastinate</h3>
      <p>Completely synergize resource taxing relationships via premier niche markets.</p>
      <button>Read more</button>
    </div>
  </article>
  <article>
    <img src="https://via.placeholder.com/300x100" alt="Sample photo">
    <div class="text">
      <h3>Best in class</h3>
      <p>Imagine jumping into that boat, and just letting it sail wherever the wind takes you...</p>
      <button>Just do it...</button>
    </div>
  </article>
  <article>
    <img src="https://via.placeholder.com/300x100" alt="Sample photo">
    <div class="text">
      <h3>Dynamically innovate supply chains</h3>
      <p>Holisticly predominate extensible testing procedures for reliable supply chains.</p>
      <button>Here's why</button>
    </div>
  </article>
  <article>
    <img src="https://via.placeholder.com/300x100" alt="Sample photo">
    <div class="text">
      <h3>Sanity check</h3>
      <p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
      <button>Stop here</button>
    </div>
  </article>
</main>

In short, both the article elements and the nested .text elements need to be flex columns with appropriate configuration.

Upvotes: 3

iambaker
iambaker

Reputation: 36

Something like this should work...

.text {
  display: grid;
  height: 90%;
  grid-template-rows: auto 1fr auto;
}

Upvotes: 1

Related Questions