1
<!doctype html>
2
<title>Example</title>
3
<style>
4
.grid {
5
  display: grid;
6
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
7
  grid-gap: 20px;
8
  align-items: center;
9
  }
10
.grid > article {
11
  border: 1px solid #ccc;
12
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
13
}
14
.grid > article img {
15
  max-width: 100%;
16
}
17
.text {
18
  padding: 0 20px 20px;
19
}
20
.text > button {
21
  background: gray;
22
  border: 0;
23
  color: white;
24
  padding: 10px;
25
  width: 100%;
26
  }
27
</style>
28
<main class="grid">
29
  <article>
30
    <img src="/pix/samples/23m.jpg" alt="Sample photo">
31
    <div class="text">
32
      <h3>Seamlessly visualize quality</h3>
33
      <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
34
      <button>Here's why</button>
35
    </div>
36
  </article>
37
  <article>
38
    <img src="/pix/samples/24m.jpg" alt="Sample photo">
39
    <div class="text">
40
      <h3>Completely Synergize</h3>
41
      <p>Dramatically engage seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing.</p>
42
      <button>Here's how</button>
43
    </div>
44
  </article>
45
  <article>
46
    <img src="/pix/samples/22l.jpg" alt="Sample photo">
47
    <div class="text">
48
      <h3>Dynamically Procrastinate</h3>
49
      <p>Completely synergize resource taxing relationships via premier niche markets.</p>
50
      <button>Read more</button>
51
    </div>
52
  </article>
53
  <article>
54
    <img src="/pix/samples/15l.jpg" alt="Sample photo">
55
    <div class="text">
56
      <h3>Best in class</h3>
57
      <p>Imagine jumping into that boat, and just letting it sail wherever the wind takes you...</p>
58
      <button>Just do it...</button>
59
    </div>
60
  </article>
61
  <article>
62
    <img src="/pix/samples/25m.jpg" alt="Sample photo">
63
    <div class="text">
64
      <h3>Dynamically innovate supply chains</h3>
65
      <p>Holisticly predominate extensible testing procedures for reliable supply chains.</p>
66
      <button>Here's why</button>
67
    </div>
68
  </article>
69
  <article>
70
    <img src="/pix/samples/16l.jpg" alt="Sample photo">
71
    <div class="text">
72
      <h3>Sanity check</h3>
73
      <p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
74
      <button>Stop here</button>
75
    </div>
76
  </article>
77
</main>