<h1>Grid Test <small>All examples use same html</small></h1>
<div class="container1">
  <div class="col column1">
    <h2>Column 1</h2>
    <p>Column 1 content Column 1 content Column 1 content Column 1 content Column 1 content Column 1 content Column 1 content </p>
  </div>
  <div class="col column2">
    <h2>Column 2</h2>
    <p>Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content </p>
  </div>
  <div class="col column3">
    <h2>Column3</h2>
    <p>Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content </p>
  </div>
</div>
<footer>
  <p>Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here </p>
</footer>

<h1>Flexbox Test</h1>
<div class="container2">
  <div class="col column1">
    <h2>Column 1</h2>
    <p>Column 1 content Column 1 content Column 1 content Column 1 content Column 1 content Column 1 content Column 1 content </p>
  </div>
  <div class="col column2">
    <h2>Column 2</h2>
    <p>Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content </p>
  </div>
  <div class="col column3">
    <h2>Column3</h2>
    <p>Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content </p>
  </div>
</div>
<footer>
  <p>Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here Footer goes here </p>
</footer>

<div class="disclaimer">
  <h3>Experiments only</h3>
  <p>All the above are just experiments and untested with real use cases or real content.</p>
  <p>Please use with care and thoroughly test in the browers you want to support using real content rather than dummy text.</p>
</div>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  margin: 0;
}
h1 {
  text-align: center;
}
.container1 {
  display: grid;
  grid-template-areas:
    "side1  main side2";
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  margin-bottom: 1rem;
}
.col {
  padding: 1rem;
}
.container1 .column1 {
  grid-area: side1;
  background-color: #ffa08c;
  min-width: 200px;
}
.container1 .column2 {
  grid-area: main;
  background-color: #ffff64;
}
.container1 .column3 {
  grid-area: side2;
  background-color: #eee;
  min-width: 200px;
}
footer {
  padding: 1rem;
  margin: 1rem 0 3rem;
  border-bottom: 5px solid #000;
  background-color: #8cffa0;
}
@media screen and (min-width: 1450px) {
  .container1 {
    grid-template-columns: auto auto auto;
  }
  .container1 .column2 {
    width: 980px;
  }
}
@media screen and (max-width: 762px) {
  /* re-arrange as required for smaller screens*/
  /* I've just set it to block because I'm lazy */
  .container1 {
    display: block;
    padding:0 1rem;
  }
}

/* second example */
.container2 {
  display: flex;
  width: 100%;
  margin-bottom: 1rem;
}
.container2 > div {
  flex: 1 0 33%;
  max-width: 33%;
}
.container2 .column1 {
  background-color: #ffa08c;
}
.container2 .column2 {
  background-color: #ffff64;
  margin: 0 1rem;
  flex: 1 0 0%;
}
.container2 .column3 {
  background-color: #eee;
}

@media screen and (max-width: 762px) {
  /* re-arrange as required for smaller screens*/
  /* I've just set it to block because I'm lazy */
  .container2 {
    display: block;
    padding:0 1rem;
  }
  .container2 > div {
    width: auto;
    max-width: none;
    margin: 0 0 1rem;
  }
  .container2 .column2 {
    margin: 0 0 1rem;
  }
}

.disclaimer {
  max-width: 980px;
  background: #666;
  color: #f9f9f9;
  padding: 1rem;
  font-size: 1.5rem;
  margin: 2rem auto;
}