Flexbox Nested Grid

by Shashank D

HTML

<!-- Product Grid -->
    <div class="flex-grid">
      <div class="flex__direction--column">
        <div class="flex__direction--row">
        
          <!-- Primary Gateway -->
          <div class="item item--primary">
            <div class="item__description">
              <h3>Primary Gateway</h3>
              <p>It is a long established fact that a reader will be distracted by the readable.</p>
            </div>
          </div>
          
          <div class="item flex__direction--column">
            <!-- Secondary Gateway -->
            <div class="item item--secondary">
              <div class="item__description">
                <h4>Secondary Gateway</h4>
                <p>It is a long established fact that a reader will be distracted by the readable.</p>
              </div>
            </div>
            <div class="item">
              <div class="flex__direction--row">
                <!-- Tertiary Gateway -->
                <div class="item item--tertiary">
                  <div class="item__description">
                    <h5>Tertiary Gateway</h5>
                    <p>It is a long established fact that a reader will be distracted by the readable.</p>
                  </div>
                </div>
                <!-- Tertiary Gateway -->
                <div class="item item--tertiary">
                  <div class="item__description">
                    <h5>Tertiary Gateway</h5>
                    <p>It is a long established fact that a reader will be distracted by the readable.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

SCSS

.flex-grid {
  .item {
    flex: 1;
    min-height: 150px;
  }
  .item--primary, .item--secondary, .item--tertiary {
    margin: 2px;
    background: lightgray;
  }
  .item--primary {
    margin-bottom: 0;
  }
}

// Set Flex Direction - Column
.flex__direction--column {
  display: flex;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
}

// Set Flex Direction - Row
.flex__direction--row {
  display: flex;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
}