<div class="list">
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li></li>
  <li></li>
  <li></li>
</div>
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -30px 0 0 -30px;
  padding: 30px;
  
  > li {
    margin: 30px 0 0 30px;
    width: 300px;
    flex: 0 0 auto;
    height: 100px;
    display: grid;
    place-items: center;
    background-color: rgba(#ff00ff, 0.2);
  }
  
  > li:nth-last-child(-n + 3) {
    margin: 0 0 0 30px;
    height: 0;
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.