diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index ec21e3f..eb81b25 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -8,7 +8,7 @@
 		{{ end }}
 		<div class="cards">
 			{{ range .Paginator.Pages }}
-				<div class="card">
+				<div class="card{{ with .Site.Params.CardsColumns }} card--{{ . }}col{{ else }} card--2col{{ end }}">
 					{{ .Render "summary" }}
 				</div>
 			{{ end }}
diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html
index c066a06..48c6f7b 100644
--- a/layouts/_default/summary.html
+++ b/layouts/_default/summary.html
@@ -1,4 +1,4 @@
-<article class="post block">
+<article class="post card__box block">
 	<h1 class="post__title"><a class="post__title-link" href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
 	<div class="post__content">{{- .Summary }}</div>
 	<div class="post__meta meta mt tar">{{ partial "post_meta.html" . }}</div>
diff --git a/static/css/main.css b/static/css/main.css
index 1e85e3b..da9adc7 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -411,6 +411,47 @@ mark {
 	text-decoration: none;
 }
 
+/* Cards UI*/
+.cards {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.card {
+	display: flex;
+	width: 100%;
+	padding: 3px 0;
+}
+
+@media screen and (min-width: 480px) {
+	.card {
+		padding: 5px;
+	}
+}
+
+@media screen and (min-width: 720px) {
+	.card--2col {
+		width: 50%;
+	}
+
+	.card--3col {
+		width: 50%;
+	}
+}
+
+@media screen and (min-width: 860px) {
+	.card--3col {
+		width: 33.333%;
+	}
+}
+
+.card__box {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	margin: 0;
+}
+
 /* Taxonomies */
 .page__title {
 	margin-bottom: 0;