Scrolling Card UI With CSS Grid

1<div class="container">
2  <h2>Scrolling Card UI With CSS Grid</h2>
3  <ul class="cards">
4    <li class="card">
5      <div>
6        <h3 class="card-title">Service 1</h3>
7        <div class="card-content">
8          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
9        </div>
10      </div>
11      <div class="card-link-wrapper">
12        <a href="" class="card-link">Learn More</a>
13      </div>
14    </li>
15    <li class="card">
16      <div>
17        <h3 class="card-title">Service 2</h3>
18        <div class="card-content">
19          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab repudiandae magnam harum natus fuga et repellat in maiores.</p>
20        </div>
21      </div>
22      <div class="card-link-wrapper">
23        <a href="" class="card-link">Learn More</a>
24      </div>
25    </li>
26    <li class="card">
27      <div>
28        <h3 class="card-title">Service 3</h3>
29        <div class="card-content">
30          <p>Phasellus ultrices lorem vel bibendum ultricies. In hendrerit nulla a ante dapibus pulvinar eu eget quam.</p>
31        </div>
32      </div>
33      <div class="card-link-wrapper">
34        <a href="" class="card-link">Learn More</a>
35      </div>
36    </li>
37    <li class="card">
38      <div>
39        <h3 class="card-title">Service 4</h3>
40        <div class="card-content">
41          <p>Aenean posuere mauris quam, pellentesque auctor mi bibendum nec. Sed scelerisque lacus nisi, quis auctor lorem ornare vel.</p>
42        </div>
43      </div>
44      <div class="card-link-wrapper">
45        <a href="" class="card-link">Learn More</a>
46      </div>
47    </li>
48    <li class="card">
49      <div>
50        <h3 class="card-title">Service 5</h3>
51        <div class="card-content">
52          <p>Vestibulum pharetra fringilla felis sit amet tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras et arcu sit amet est consequat feugiat. Nam ut sapien pulvinar.</p>
53        </div>
54      </div>
55      <div class="card-link-wrapper">
56        <a href="" class="card-link">Learn More</a>
57      </div>
58    </li>
59    <li class="card">
60      <div>
61        <h3 class="card-title">Service 6</h3>
62        <div class="card-content">
63          <p>Donec ut tincidunt nisl. Vivamus eget eros id elit feugiat mollis. Nam sed sem quis libero finibus tempor.</p>
64        </div>
65      </div>
66      <div class="card-link-wrapper">
67        <a href="" class="card-link">Learn More</a>
68      </div>
69    </li>
70    <li class="card">
71      <div>
72        <h3 class="card-title">Service 7</h3>
73        <div class="card-content">
74          <p>Aliquam eget nisl auctor, sollicitudin ipsum at, dignissim ligula. Donec tincidunt in elit et pellentesque. Integer posuere metus ac massa mollis euismod.</p>
75        </div>
76      </div>
77      <div class="card-link-wrapper">
78        <a href="" class="card-link">Learn More</a>
79      </div>
80    </li>
81    <li class="card">
82      <div>
83        <h3 class="card-title">Service 8</h3>
84        <div class="card-content">
85          <p> Vivamus eget eros id elit feugiat mollis. Nam sed sem quis libero finibus tempor.</p>
86        </div>
87      </div>
88      <div class="card-link-wrapper">
89        <a href="" class="card-link">Learn More</a>
90      </div>
91    </li>
92    <li class="card">
93      <div>
94        <h3 class="card-title">Service 9</h3>
95        <div class="card-content">
96          <p>Duis id congue turpis. Donec sodales porta felis, nec ultricies ante. Nam placerat vitae metus sit amet tempor. Aliquam ac dictum est.</p>
97        </div>
98      </div>
99      <div class="card-link-wrapper">
100        <a href="" class="card-link">Learn More</a>
101      </div>
102    </li>
103    <li class="card">
104      <div>
105        <h3 class="card-title">Service 10</h3>
106        <div class="card-content">
107          <p>Pellentesque eget eros eget justo efficitur fermentum.</p>
108        </div>
109      </div>
110      <div class="card-link-wrapper">
111        <a href="" class="card-link">Learn More</a>
112      </div>
113    </li>
114    <li class="card">
115      <div>
116        <h3 class="card-title">Service 11</h3>
117        <div class="card-content">
118          <p>Phasellus posuere nec nibh ut tincidunt. Aenean mollis turpis non eros posuere, at luctus leo hendrerit. Integer non libero sapien.</p>
119        </div>
120      </div>
121      <div class="card-link-wrapper">
122        <a href="" class="card-link">Learn More</a>
123      </div>
124    </li>
125    <li class="card">
126      <div>
127        <h3 class="card-title">Service 12</h3>
128        <div class="card-content">
129          <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ornare metus ac lectus scelerisque volutpat.</p>
130        </div>
131      </div>
132      <div class="card-link-wrapper">
133        <a href="" class="card-link">Learn More</a>
134      </div>
135    </li>
136  </ul>
137</div>