<h1>CSS Switch Layout</h1>

<div class="switch-contents">
  <input id="layout-single" type="radio" name="layout" checked><label for="layout-single">Single</label>
  <input id="layout-column" type="radio" name="layout"><label for="layout-column">Column</label>
  <input id="layout-card" type="radio" name="layout"><label for="layout-card">Card</label>

  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
h1 {
  margin: 1em 0;
  font-size: 3.2rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  text-align: center;
}
.switch-contents {
  padding: 1em;
  text-align: center;
}
input[name="layout"] {
  display: none;
  &:checked + label {
    border-bottom: 2px solid #3498db;
    cursor: default;
  }
}
label {
  display: inline-block;
  margin: 0 1em;
  font-size: 1.2rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  cursor: pointer;
  &:hover {
    border-bottom: 2px solid #000;
  }
}
ul {
  margin: 0;
  padding: 1em 0 0;
  list-style: none;
  text-align: left;
  li {
    min-height: 200px;
    background: #3498db;
  }
}

$margin: 2em;

#layout-single:checked ~ ul li {
  margin-top: $margin;
}

#layout-column:checked ~ ul {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-1 * calc(#{$margin} / 2));
  margin-left: calc(-1 * calc(#{$margin} / 2));
  li {
    width: calc(50% - #{$margin});
    margin-top: $margin;
    margin-right: calc(#{$margin} / 2);
    margin-left: calc(#{$margin} / 2);
  }
}

#layout-card:checked ~ ul {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-1 * calc(#{$margin} / 2));
  margin-left: calc(-1 * calc(#{$margin} / 2));
  li {
    width: calc(25% - #{$margin});
    margin-top: $margin;
    margin-right: calc(#{$margin} / 2);
    margin-left: calc(#{$margin} / 2);
  }
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans:300

External JavaScript

This Pen doesn't use any external JavaScript resources.