CSS Example: Cards Flexible Width Align-Items Center

<!doctype html>
<title>Example</title>
<style>
.grid { 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  align-items: center;
  }
.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="/examples/files/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="/examples/files/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="/examples/files/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="/examples/files/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="/examples/files/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="/examples/files/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>

 
<!doctype html>
<title>Example</title>
<style>
.grid { 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  align-items: center;
  }
.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="/examples/files/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="/examples/files/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="/examples/files/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="/examples/files/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="/examples/files/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="/examples/files/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>

In this example, the left side provides the code used to render the output in the right side.

Feel free to copy and paste the code into your own project and modify as you wish.

More Examples >>

About CSS

CSS stands for Cascading Style Sheets. It's used to add styles to web pages. It's typically added to HTML pages using the <link> tag, so that we can have the CSS in a separate file to the HTML file. However, we also have the option of embedding the CSS in the actual HTML file by using the <style> HTML tag, or by using the style attribute within an individual HTML tag.