---
title: flex-grid
name: flex-grid
collection: molecules
notes: |
  Use `.flex-grid` to display cards in a row. Cards are by default set to a minimum of 250px width. If you want the last one to keep its size, add 2 empty divs at the end of the container.

  You can combine the class `.flex-grid-[i]` where `[i]` is a number from 1 to 12. It will set the number of items per line, with a minimum of 100px width;
---
<div class="flex-grid">
  <a href="#" class="teaser-degree no-underline d-block">
    <h4 class="teaser-degree-course media-heading">
      Compétences générales&nbsp;<i class="fa fa-angle-right d-inline text-link m-l-05" aria-hidden="true"></i>
    </h4>
    <div class="spacer spacer-xs"></div>
    <div class="teaser-degree-infos">
      <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ipsum nobis consectetur alias quo expedita cupiditate ducimus deserunt tempora aperiam.</div>
    </div>
  </a>
  <a href="#" class="teaser-degree no-underline d-block">
    <h4 class="teaser-degree-course media-heading">
      Compétences générales&nbsp;<i class="fa fa-angle-right d-inline text-link m-l-05" aria-hidden="true"></i>
    </h4>
    <div class="spacer spacer-xs"></div>
    <div class="teaser-degree-infos">
      <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ipsum nobis consectetur alias quo expedita cupiditate ducimus deserunt tempora aperiam.</div>
    </div>
  </a>
  <a href="#" class="teaser-degree no-underline d-block">
    <h4 class="teaser-degree-course media-heading">
      Compétences générales&nbsp;<i class="fa fa-angle-right d-inline text-link m-l-05" aria-hidden="true"></i>
    </h4>
    <div class="spacer spacer-xs"></div>
    <div class="teaser-degree-infos">
      <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ipsum nobis consectetur alias quo expedita cupiditate ducimus deserunt tempora aperiam.</div>
    </div>
  </a>
  <a href="#" class="teaser-degree no-underline d-block">
    <h4 class="teaser-degree-course media-heading">
      Compétences générales&nbsp;<i class="fa fa-angle-right d-inline text-link m-l-05" aria-hidden="true"></i>
    </h4>
    <div class="spacer spacer-xs"></div>
    <div class="teaser-degree-infos">
      <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ipsum nobis consectetur alias quo expedita cupiditate ducimus deserunt tempora aperiam.</div>
    </div>
  </a>
  <a href="#" class="teaser-degree no-underline d-block">
    <h4 class="teaser-degree-course media-heading">
      Compétences générales&nbsp;<i class="fa fa-angle-right d-inline text-link m-l-05" aria-hidden="true"></i>
    </h4>
    <div class="spacer spacer-xs"></div>
    <div class="teaser-degree-infos">
      <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ipsum nobis consectetur alias quo expedita cupiditate ducimus deserunt tempora aperiam.</div>
    </div>
  </a>
  <div></div>
  <div></div>
</div>