CSS Grid and Flexbox

by Shaun Luttin

HTML

<p>
  Three equal width columns. Two rows.
</p>
<div class='grid'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

.grid>div {
  outline: thin solid red;

}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap:5px;
  grid-row-gap:5px;
  grid-template-rows: 20px auto 30px;
  outline:thin solid black;
  height:300px;
  grid-gap:10px;
    grid-row-start:2;
  grid-column-start:2;
}