JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<p>
Hauptseite
</p>
<p>
Hauptseite
</p>
<p>
Hauptseite
</p>
<p>
Hauptseite
</p>
<p>
Hauptseite
</p>

<footer>
<p>
  aaaaaaa
</p>
<p>
  xxxxxxxxxxxx
</p>
<p>
  bbbbbbb
</p>
<p>
  zzzzzzzzzzzzzzzzzzzz
</p>
</footer>
</body>

CSS

body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 1em;
  margin-top: 0;

}

footer {
/* Position im body-Raster */
  grid-column: 1 / -1;
  grid-column-gap: 1em;

/* neues Raster für den Inhalt des Footers */
  display: grid;
  grid-template-columns: 3fr 1fr  100px 20em;
  height: 1em;
}
p {
  border: solid 1px red;

}