Problem mit css-grid

[MrMurphy1]

Hallo Pit

Das Grundproblem ist dass du mittels CSS zu viel bestimmen willst.

Grade die neuen Möglichkeiten von Flexbox und CSS Grid sollen aber dem Browser viele Berechnungen übertragen.

Dazu gehört auf Angaben wie width, height und beim Grid auch auf margin zu verzichten. Das margin wird durch das grid-gap ersetzt. Innenabstände werden weiterhin durch padding erzeugt.

Zunächst solltest du auch bei Testseiten immer ein vernünftiges HTML-Grundgerüst verwenden.

Dazu gehört, Texte nur in dafür vorgesehende Elemente zu schreiben wie p, h1 bis h6, li, dt, dd, figcaption und so weiter.

Nicht jedoch in Container wie div, nav, header, footer, main, article, section, aside und so weiter.

Also in deinem Fall

   <nav>
      <div class="gridcontainer">
         <div class="gridcontainer_l">
            <p>links</p>
         </div>
         <div class="gridcontainer_m">
            <p>mitte</p>
         </div>
         <div class="gridcontainer_r">
            <p>rechts</p>
         </div>
         <footer>
            <p>Bla bla</p>
         </footer>
      </div>
   </nav>

Bei deinen Klassenbezeichnungen kannst du bleiben, ich finde in diesem Fall gridcontainer einfach zutreffender.

Dann solltest du zunächst das Grid bestimmen und anschließend nur die Container einsortieren, bei denen es auch erforderlich ist:

   /*.gridcontainer für CSS Grid*/
   @media all {
      .gridcontainer {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-gap: 0.5rem;
      }
      .gridcontainer footer {
         grid-column: 1 / 4;
      }
   }

Das ist für dein Grid auch schon alles. Kein width, kein height, kein margin, keine unnötigen Zuweisungen, keine Berechnungen. Einfacher und übersichtlicher, genau das, was mit CSS Grid erreicht werden soll.

Anschließend werden die restlichen CSS-Angaben hinzugefügt. Hintergrundfarben sind natürlich bereits vorher sinnvoll um das Layout sichtbar kontrollieren zu können. Dabei werden die CSS-Angaben jeweils passend den Elementen zugewiesen, also:

   /*.gridcontainer sonstiges Layout*/
   @media all {
      nav {
         background-color: #F2F2F2;
      }
      .gridcontainer {
      }
      .gridcontainer .gridcontainer_l {
         background-color: #D2FFD2;
      }
      .gridcontainer .gridcontainer_m {
         background-color: #D2E9FF;
      }
      .gridcontainer .gridcontainer_m p {
         color: #737373;
         font-family: Verdana, Arial;
         font-size: 1.5em;
         font-weight: bold;
         text-align: justify;
         text-shadow: 4px 4px 4px #EEEEEE;
         letter-spacing: 0.5em;
      }
      .gridcontainer .gridcontainer_r {
         background-color: #FFFFAE;
      }
      .gridcontainer footer {
         background-color: #FFFF00;
      }
   }

Die CSS-Angaben können natürlich mit den vorherigen zusammengefügt werden, wenn dies möglich ist.

Das @media all-Umschließung kannst du auch weglassen. Ich verwende es um mein CSS übersichtlicher zu strukturieren.

Ich habe dazu mal eine Beispielseite erstellt:

Beispielseite

Gruss

MrMurphy