<div id="root" class="pink-box k-centered k-container">
  <div class="k-row red-box">
    <div class="k-col k-c-2-xs k-c-4-m yellow-box k-center">A</div>
    <div class="k-col k-c-2-xs k-c-4-m yellow-box k-center">B</div>
    <div class="k-col k-c-2-xs k-c-4-m yellow-box k-center">C</div>
    <div class="k-col k-c-2-xs k-c-4-m yellow-box k-center">D</div>
  </div>
  <div class="k-row blue-box">
    <div class="k-col k-c-3 pink-box k-center">A</div>
    <div class="k-col k-c-3 pink-box k-center">B</div>
    <div class="k-col k-c-3 pink-box k-center">C</div>
  </div>
  <div class="k-row green-box">
    <div class="k-col k-c-12 yellow-box k-center">A</div>
    <div class="k-col k-c-12 yellow-box k-center">B</div>
    <div class="k-col k-c-12 yellow-box k-center">C</div>
    <div class="k-col k-c-12 yellow-box k-center">D</div>
    <div class="k-col k-c-12 yellow-box k-center">E</div>
    <div class="k-col k-c-12 yellow-box k-center">F</div>
    <div class="k-col k-c-12 yellow-box k-center">G</div>
    <div class="k-col k-c-12 yellow-box k-center">H</div>
    <div class="k-col k-c-12 yellow-box k-center">I</div>
    <div class="k-col k-c-12 yellow-box k-center">J</div>
    <div class="k-col k-c-12 yellow-box k-center">K</div>
    <div class="k-col k-c-12 yellow-box k-center">L</div>
  </div>
  <div id="pyramid" class="k-container k-centered red-box"></div>
</div>
// Debug stuff
.red-box
  background red
.pink-box
  background pink
.yellow-box
  background yellow
.green-box
  background green
.blue-box
  background blue
.pyramid-wrapper
  padding 0
  margin 0

div
  min-height 90px
  padding 30px
body
  background teal
  padding 0
  margin 0
  
// Variables
$GRID_WIDTH = 1200px
$GUTTER_WIDTH = 20px
$MAX_COLS = 12

// For now only two breakpoints are fine
$BREAKPOINTS = {
  'xs': 0,
  's': 400,
  'm': 600,
  'l': 800,
  'xl': 1080
}

// Mixins
clearfixer()
  &:after
    display table
    clear both
    content ''

columnProperties(n,gutterWidth)
  w = unit(gutterWidth * n, px)
  width "calc(calc(100% - %s) / %s)" % (w n)
  margin-right (gutterWidth / 2)
  margin-left (gutterWidth / 2)
  float left

// Rules
html
  box-sizing border-box

*,
*:before,
*:after
  box-sizing inherit

// Utility classes
.k-center
  text-align center

.k-container
  width 100%
  height 100%
  display block
  max-width $GRID_WIDTH
  
.k-centered
  margin-left auto
  margin-right auto

.k-row
  max-width $GRID_WIDTH
  clearfixer()

.k-col
  // Make standard column defs
  for n in (1..$MAX_COLS)
    &.k-c-{n}
      columnProperties(n, $GUTTER_WIDTH)
  // Make breakpoint specific column defs
  for bk, val in $BREAKPOINTS
    for n in (1..$MAX_COLS)
      @media (min-width: unit(val, px))
        &.k-c-{n}-{bk}
          columnProperties(n, $GUTTER_WIDTH)
const LETTERS = 'ABCDEFGHIJKL';
const numbers = [];

let i = 0;
while (i < 12) {
  numbers.push(i)
  i++;
}

const Cell = ({ size, color }) => (
  <div className="adf"></div>
);
  
const Pyramid = () => {
  return <div className="pyramid-wrapper">
    {
      numbers.map((n) => {
        return <div className="k-row" key={ `row-${n}`}>
          {
            numbers.map((m) => {
              if (m < n) {
                return (
                  <div
                    className="k-col k-c-12" 
                    key={ `cell-${n}-${m}`}></div>
                )
              }
              return (
                <div
                  className="k-col k-c-12 yellow-box"
                  key={ `cell-${n}-${m}` }
                    >{ LETTERS[m - n]}</div>
              )
            })
          }
        </div>
      })
    }
  </div>;
};


ReactDOM.render(<Pyramid />, document.getElementById('pyramid'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js