<ul class="grid" role="list">
	<li>
		<div class="card">
			<p class="title">HTML</p>
			<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus magni vero distinctio ut repudiandae sapiente saepe, enim maxime ipsum culpa quisquam odit quo aliquam ullam praesentium neque aut! Inventore, veniam.</p>
			<p><a class="button" href="#">Learn more</a></p>
		</div>
	</li>
	<li>
		<div class="card">
			<p class="title">CSS</p>
			<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
			<p><a class="button" href="#">Learn more</a></p>
		</div>
	</li>
	<li>
		<div class="card">
			<p class="title">JavaScript</p>
			<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur aperiam eum neque totam eaque reprehenderit consequuntur fuga?</p>
			<p><a class="button" href="#">Learn more</a></p>
		</div>
	</li>
</ul>
html {
	line-height: 1.5;
}

body {
	margin: 1.5rem;
}

p {
	margin-top: 0;
	margin-bottom: 0;
}

ul {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
	list-style-type: none;
}

.grid {
	display: grid;
	grid-gap: 1.5rem;
}

@supports (width: min(250px, 100%)) {
	.grid {
		grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
	}
}

.card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.5rem;
	color: #fff;
	background-color: #000;
}

.card > * + * {
	margin-top: 1.5rem;
}

.card > :nth-child(2) {
	margin-bottom: auto;
}

.title {
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.2;
}

.button {
	display: block;
	padding: 0.25rem;
	color: inherit;
	border: 2px solid;
	text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.