JSFiddle - React, Tailwind, and code Playground

by Atty Eleti

HTML

<div class="container direction-row spacing-24">
  <div class="item">
    2-width item
  </div>
  <div class="item">
    6-width item
  </div>
  <div class="item">
    4-width item
  </div>
</div>

<style>
  body {
    margin: 0;
    padding: 24px 16px;
  }
  
  .container {
    position: relative;
    height: 240px;
    outline: 1px solid red;
  }
  
  .item {
    outline: 1px solid blue;
  }
</style>

CSS

/*
 * A modern, responsive, flexbox grid.
 * Inspired by https://material-ui.com/api/grid/.
 *
 * Where mentioned, Flexbugs are a reference to
 * https://github.com/philipwalton/flexbugs. Most Flexbugs don't apply to us.
 * When they do, if we choose to fix them, they are referenced inline.
 *
 * Gotchas:
 *
 * 1. When creating a container with a column direction, note that the item
 *    sizes will only apply if the container has an explicit height. This is
 *    expected behavior (see https://stackoverflow.com/a/39580792/2304614).
 *
 * TODO:
 * - Fix Flexbug #7: https://github.com/philipwalton/flexbugs#flexbug-7
 * - Fix Flexbug #17: https://github.com/philipwalton/flexbugs#flexbug-17
 */

.container {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.item {
  box-sizing: border-box;
  flex: 0 1 auto; /* Flexbugs #1, #6 */
  /*
   * A min-width is necessary to enable text truncation on the children.
   * See https://css-tricks.com/flexbox-truncated-text/.
   */
  min-width: 0;
  max-width: 100%; /* Flexbug #2 */
}

/* We cannot use margin-start and margin-end due to lack of IE and Edge support. */
[class*='direction-row'].spacing-4 {
  margin-left: -2px;
  margin-right: -2px;
}
[class*='direction-row'].spacing-4 > .item {
  padding-left: 2px;
  padding-right: 2px;
}
[class*='direction-column'].spacing-4 {
  margin-top: -2px;
  margin-bottom: -2px;
}
[class*='direction-column'].spacing-4 > .item {
  padding-top: 2px;
  padding-bottom: 2px;
}
[class*='direction-row'].spacing-8 {
  margin-left: -4px;
  margin-right: -4px;
}
[class*='direction-row'].spacing-8 > .item {
  padding-left: 4px;
  padding-right: 4px;
}
[class*='direction-column'].spacing-8 {
  margin-top: -4px;
  margin-bottom: -4px;
}
[class*='direction-column'].spacing-8 > .item {
  padding-top: 4px;
  padding-bottom: 4px;
}
[class*='direction-row'].spacing-12 {
  margin-left: -6px;
  margin-right: -6px;
}
[class*='direction-row'].spacing-12 > .item {
  padding-left: 6px;
 ...