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