JSFiddle - React, Tailwind, and code Playground

HTML

<div id="grid">
<nav>full width nav</nav>
<div class="col">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="col">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>

CSS

* {word-wrap:break-word;}
#grid {
  display:grid;
  border: 2px solid red;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

#grid > * { margin: 5px; }

nav {
  grid-column: 1 / -1;
  border: 2px solid blue;
}
.col {
  border: 1px dashed black;
}