flexible image grid experiment

by James Connolly

HTML

<section class="some-area fill-height-or-more">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

SCSS

body {
  margin: 0;
  padding: 25px;
  box-sizing: border-box;
}

.fill-height-or-more {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  > div {
    // these are flex items
    
    // flex: 1; same as:
    // flex-grow: 1;
    // flex-shrink: 1;
    // flex-basis: auto;
    // flex: 1 1 auto;
    flex: 1 0 25%;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    > div {
      // also flex items 
    }
  }
}

// color styles

.some-area {
  > div {
    padding: 1rem;
    &:nth-child(1) {
      background: hsla(100, 50%, 60%, 1);
    }
    &:nth-child(2) {
      background: hsla(200, 50%, 65%, 1);
    }
    &:nth-child(3) {
      background: hsla(200, 50%, 70%, 1);
    }
    &:nth-child(4) {
      background: hsla(200, 50%, 75%, 1);
    }
    &:nth-child(5) {
      background: hsla(200, 50%, 80%, 1);
    }
    &:nth-child(6) {
      background: hsla(200, 50%, 85%, 1);
    }
    &:nth-child(7) {
      background: hsla(200, 50%, 90%, 1);
    }
    &:nth-child(8) {
      background: hsla(200, 50%, 95%, 1);
    }
    &:nth-child(9) {
      background: hsla(200, 50%, 100%, 1);
    }
    h1, h2 {
      margin: 0 0 0.2rem 0;
    }
    p {
      margin: 0;
    }
  }
}

html, body {
  height: 100%;
}