[Demo] Issue 4961 - Fix card group field alignment on acceptableads.com

scss/main.scss

Index: scss/main.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/scss/main.scss
@@ -0,0 +1,109 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: grey;
+  padding: 0;
+  margin: 0;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+p {
+  margin: 0 0 10px;
+  padding: 0;
+}
+
+.card-group {
+  padding: 30px;
+}
+
+.card {
+  background: #fff;
+  border: 1px solid black;
+}
+
+
+// Note: With both solutions, I use a fixed header height
+$card__header--height: 100px;

[juliandoucette, 2017/05/23 11:52:00]

This is not ideal. We have a problem with long headers on aa.com.

[ire, 2017/05/23 17:21:44]

Noted. I'm not sure, but there may be a way with Grid to have a fluid height.
I'll do a bit more research on that.

+
+.card__header {
+  height: $card__header--height;
+  margin-bottom: 20px;
+  border: 2px solid plum;
+}
+
+.card__content {
+  border: 2px solid cornflowerblue;
+}
+.card__footer {
+  border: 2px solid lightcoral;
+}
+
+
+
+
+/* Table Layout Fallback
+ * Note - requires a set height for the .card__footer
+ */
+
+$card__footer--height: 30px;

[ire, 2017/05/19 05:37:57]

@julian Here is the main difference between the two methods. This one requires a
set height for the card footer

[juliandoucette, 2017/05/23 11:52:00]

Acknowledged.

I think this is a reasonable limitation because we can control the content in a
button easier than the content in a title or description.

[ire, 2017/05/23 17:21:44]

Acknowledged.

+
+.card-group {
+  display: table;
+}
+
+.card {
+  display: table-cell;
+  position: relative;
+
+  width: 100%;
+  @media (min-width: 600px) { width: 50%; }
+  @media (min-width: 800px) { width: 33%; }

[ire, 2017/05/19 05:37:57]

@julian Another difference is that the breakpoints have to be set manually. So
they may not break at the exact optimal points based on a max/min width we want
each card to be.

[juliandoucette, 2017/05/23 11:52:00]

Acknowledged.

This doesn't resize well :(

Ideally, the fallback solution should stack. If not, I think it should scroll.
Squished content is worse than not aligned content.

[ire, 2017/05/23 17:21:44]

On 2017/05/23 11:52:00, juliandoucette wrote: 
It actually should be stacked. Maybe there's an issue, I will check it out to
make sure.

+}
+
+.card__content {
+  margin-bottom: $card__footer--height + 20px;
+}
+
+.card__footer {
+  height: $card__footer--height;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+
+
+
+/* Grid Layout Enhancement
+ *
+ */
+$card--max-width: 300px;
+
+@supports (display: grid) {
+
+  .card-group {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax($card--max-width, 1fr))
+  }
+
+  .card {
+    display: inline-grid;
+    grid-template-rows: minmax($card__header--height, auto) 1fr auto;
+    @media all { width: 100%; }
+  }
+
+  .card__content {
+    margin-bottom: 20px;
+  }
+
+  .card__footer {
+    position: relative;
+    height: auto;
+  }
+
+}