flexbox-grid-mixins/docs/css/card.css

Sass Mixins to generate Flexbox grid

.cards {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  row-gap: 2rem;
  -webkit-column-gap: 1rem;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
}

.card {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 33.3333333333% - 1rem + 0.3333333333rem);
  flex: 0 0 calc( 33.3333333333% - 1rem + 0.3333333333rem);
  border: solid 3px #ddd;
  padding: 1rem;
}

button {
  width: 100%;
  padding: 0.8rem;
  background: #ec9f10;
  border: solid 1px #ddd;
}

.cards.with-button .card {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.column {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
}