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