Fomantic-UI grids - figuring out the rules

Fomantic-UI grids experiments

by Andy Bulka

HTML

<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<link rel="stylesheet" href="https://fomantic-ui.com/dist/semantic.css">
<h1>
  Fomantic grids - nested
</h1>
<div class="ui two column grid wrapper debug">
  <div class="column">
    <div class="ui three column grid">
      <div class="column">1</div>
      <div class="column">2</div>
      <div class="column">3</div>
    </div>
  </div>
  <div class="column">4</div>
  <div class="column">5</div>
  <div class="column">
    <div class="ui grid">
      <div class="ten wide column">6</div>
      <div class="six wide column">7</div>
    </div>
  </div>
</div>

<h2>
  Chordjammer design
</h2>

<div class="ui three column compact grid wrapper">
  <div class="ten wide column">

    <!-- sub grid  -->
    <div class="ui four column divided compact grid">
      <div class="row">
        <div class="column two wide">
          AAA
        </div>
        <div class="column three wide centered">
          BB
        </div>
        <div class="center aligned column five wide">
          <span class="ui medium red text">medium</span>
        </div>
        <div class="column six wide">
          fourth column
          fourth column
          fourth column
          fourth column
          fourth column
        </div>
      </div>
      <div class="row debug">
        <div class="column two wide">
          AAA2
        </div>
        <div class="column three wide">
          BB2
        </div>
        <div class="center aligned column five wide">
          BBBBB2
        </div>
        <div class="column six wide">
          fourth column2
          fourth column2
          fourth column2

        </div>
      </div>

    </div>
  </div>

  <div class="three wide stretched column debug2">

    <!-- three row subgrid using fomantic - doesn't spread vertically as you get narrower -->
<!--     
    <div class="ui center aligned divided compact grid ">
      <div class="middle aligned row">
        <div...

CSS

.fred {
  height: 100%;
}
  
.outer {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.wrapper div {
  background: #eee;
  /* padding: 1em; */
}

.wrapper div:nth-child(odd) {
  background: #ddd;
}

.debug div {
  border: 1px dotted red;
}
.debug2 div {
  border: 1px solid green;
}

body {
  background-color: darkgray;
}

JavaScript

$('.ui.dropdown')
    .dropdown();