Three Up Component

Item 1

Item 2

Item 3

Component Details

Three up displays three content blocks side by side.


        <div class="c-three-up">
          <div class="c-three-up__item">
            Item 1
          </div>
          <div class="c-three-up__item">
            Item 2
          </div>
          <div class="c-three-up__item">
            Item 3
          </div>
        </div>


        .c-three-up {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          column-gap: 20px;
        }
        
        .c-three-up__item {
          min-height: 250px;
          padding: 20px;
          border: 1px solid gray;
        }


        .c-three-up {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          column-gap: 20px;
          
          &__item {
            min-height: 250px;
            padding: 20px;
            border: 1px solid gray;
          }
        }