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
  }
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
  grid-row: span 2;
29
}
30
</style>
31
<main class="grid">
32
  <article>
33
    <img src="/pix/samples/23l.jpg" alt="Sample photo">
34
    <div class="text">
35
      <h3>Seamlessly visualize quality</h3>
36
      <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
37
      <h4>Going forward</h4>
38
      <img src="/pix/stock/css_grid_placement_lines_and_tracks.png" alt="Sample photo">
39
      <p>Seamlessly visualize quality intellectual capital without superior collaboration and brain storming. </p>
40
      <p>Proactively envisioned multimedia based expertise and cross-media growth strategies.</p>
41
      <button>Here's why</button>
42
    </div>
43
  </article>
44
  <article>
45
    <img src="/pix/samples/24m.jpg" alt="Sample photo">
46
    <div class="text">
47
      <h3>Completely Synergize</h3>
48
      <p>Dramatically engage seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing.</p>
49
      <button>Here's how</button>
50
    </div>
51
  </article>
52
  <article>
53
    <img src="/pix/samples/22l.jpg" alt="Sample photo">
54
    <div class="text">
55
      <h3>Dynamically Procrastinate</h3>
56
      <p>Completely synergize resource taxing relationships via premier niche markets.</p>
57
      <button>Read more</button>
58
    </div>
59
  </article>
60
  <article>
61
    <img src="/pix/samples/15l.jpg" alt="Sample photo">
62
    <div class="text">
63
      <h3>Best in class</h3>
64
      <p>Imagine jumping into that boat, and just letting it sail wherever the wind takes you...</p>
65
      <button>Just do it...</button>
66
    </div>
67
  </article>
68
  <article>
69
    <img src="/pix/samples/25m.jpg" alt="Sample photo">
70
    <div class="text">
71
      <h3>Dynamically innovate supply chains</h3>
72
      <p>Holisticly predominate extensible testing procedures for reliable supply chains.</p>
73
      <button>Here's why</button>
74
    </div>
75
  </article>
76
  <article>
77
    <img src="/pix/samples/16l.jpg" alt="Sample photo">
78
    <div class="text">
79
      <h3>Sanity check</h3>
80
      <p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
81
      <button>Stop here</button>
82
    </div>
83
  </article>
84
</main>