Age-old Label Value Layouts

by chucknelson

HTML

<h1>
  Responsive CSS Grids
</h1>

<div class="responsiveGrid">
  <span class="label left">Label 1</span>
  <span class="value left">Value 1</span>

  <span class="label left">Label 2</span>
  <span class="value left">
    A really long value to see some wrapping.
    A really long value to see some wrapping.
    A really long value to see some wrapping.
    A really long value to see some wrapping.
  </span>

  <span class="label left">Label 3 Which is Longer</span>
  <span class="value left">Value 3</span>

  <!-- TODO: These items should be on a right-hand side in the two-pairs view -->
  <span class="label right">Label 4</span>
  <span class="value right">Value 4</span>

  <span class="label right">Label 5</span>
  <span class="value right">Value 5 Another really long one to see how wrapping is going to work.</span>

  <span class="label right">Label 6</span>
  <span class="value right">Value 6</span>
</div>


<h1>
  Nested CSS Grids
</h1>

<div class="layoutGrid">
  <div class="layoutGrid__columnOne labelValueGrid">
    <span class="label">Label 1</span>
    <span class="value">Value 1</span>

    <span class="label">Label 2</span>
    <span class="value">
      A really long value to see some wrapping.
      A really long value to see some wrapping.
      A really long value to see some wrapping.
      A really long value to see some wrapping.
    </span>

    <span class="label">Label 3 Which is Longer</span>
    <span class="value">Value 3</span>
  </div>
  <div class="layoutGrid__columnTwo labelValueGrid">
    <span class="label">Label 4</span>
    <span class="value">Value 4</span>

    <span class="label">Label 5</span>
    <span class="value">Value 5</span>

    <span class="label">Label 6</span>
    <span class="value">Value 6</span>
  </div>
</div>

<h1>
  CSS Grid
</h1>

<div id="grid">
  <span class="label">Label 1</span>
  <span class="value">Value 1</span>

  <span class="label">Label 2</span>
  <span class="value">A really long value to see...

SCSS

.responsiveGrid {
  display: grid;
  grid-auto-columns: auto 1fr;
  grid-auto-flow: dense;
  gap: 16px 4px;

  .label {
    grid-column: 1;
    background-color: yellow;
  }

  .value {
    grid-column: 2;
    background-color: orange;
  }

  /* right hand columns go in cols 3 and 4 in larger view */
  @media (min-width: 600px) {
    .right.label {
      grid-column: 3;
    }
    
    .right.value {
      grid-column: 4;
    }
  }
}

/* --- */

.layoutGrid {
  display: grid;
  /* equal 2 column layout */
  grid-template-columns: 1fr 1fr;

  /* stacked single columns in small view */
  @media (max-width: 550px) {
    grid-template-columns: 1fr;
  }

  &__columnOne {
    background-color: #eee;
  }

  &__columnTwo {
    background-color: #ccc;
  }
}

.labelValueGrid {
  display: grid;
  /*
    Max content for the label (longest label sets the width).
    Stretch the value for the rest of it.
  */
  grid-template-columns: auto 1fr;


  .label {
    background-color: yellow;
  }

  .value {
    background-color: orange;
  }
}

/* --------- */

#grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px 2px;
}

#grid>.label {
  /* grid-column: label; */
  background-color: yellow;
}

#grid>.value {
  /* grid-column: value; */
  background-color: orange;
}


#flex>div {
  display: flex;
  border: 1px solid red;
}

#flex>div>span:first-child {
  background-color: yellow;
  flex: 1
}

#flex>div>span {
  background-color: orange;
  flex: 1;
  border: 1px solid black
}

table {
  border: 1px solid black;
}

td {
  width: max-content;
  border: 1px solid black;
}