CSS - Grid - Grid in Zelle mit Abstand drum herum

[Rolf B]

Hallo ebody,

für die störenden Scrollbars verwende

body {
  height: 100vh;
  margin: 0;
  box-sizing: border-box;
  padding: 8px;            /* 8px ist im allg. body-Defaultmargin */
}

Die height:100vh Angabe am #template solltest Du dann durch 100% ersetzen und die width-Angabe wegfallen lassen. Die Breite eines Block-Elements ist per Default so, dass es seinen Container füllt.

Das ganze center-Geraffel am #template ist überflüssig.

• justify-/align-content gibt an, wie die Gridzeilen und -spalten zu verteilen sind, wenn sie weniger Platz einnehmen als der Grid-Container.
• justify-/align-items gibt an, wie die Inhalte der Gridzellen innerhalb der Zellen anzuordnen sind, wenn der Inhalt nicht die Zelle füllt.

Für #template ist das unnötig. Für #textBox sind nur die -items Angaben nötig, um den Inhalt zu zentrieren.

• min-height für #content kann man machen, dann sollte die Höhe für die zweite Grid-Zeile aber als minmax(auto, 1fr) angegeben werden. Alternativ lass min-height am #content weg und gib für die Gridzeile minmax(200px, 1fr) an. Was "besser" ist, hängt davon ab, ob Du die Minimalhöhe lieber am Grid-Container oder am Grid-Element festlegst.

• min-width für #sidebar ist wirkungslos. Die Spalte ist auf 100px fixiert.

• Setze den hellgrünen Rand durch padding bei #content, nicht durch Margin in #textBox. Gibt der #textBox gar keinen Margin, sonst wird sie durch height:100% zu hoch (oder Du müsstest die Höhe per calc um den vertikalen Margin reduzieren, was umständlich und fehleranfällig ist)

• grid-template-areas, grid-template-rows und grid-template-columns lässt sich zur Eigenschaft "grid" zusammenfassen. Die Leerstellen, die ich für die grid-Eigenschaft bei #template gemacht habe, dienen aber nur der Lesbarkeit.

body {
  height: 100vh;
  margin: 0;
  box-sizing: border-box;
  padding: 8px;            /* 8px ist im allg. body-Defaultmargin */
}
#template {
    height: 100%;
    background: #fff;
    display: grid;
    grid: 'nav     nav    ' auto
          'content sidebar' minmax(200px, 1fr) 
        /  1fr     100px;
} 

#nav{
  grid-area: nav;
  background: #fff2cd;
  height: 100px;
}

#content{
  grid-area: content;
  background: #e1f0db;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 25px;
}

#sidebar{
  grid-area: sidebar;
  background: #deeaf6;
  min-width: 50px;
  height: 100%;
}

#textBox{
    display: grid;
    background: #a8d18d;
    grid: 1fr / 1fr
    justify-items: center;
    align-items: center;
    height: 100%;
} 

Bezüglich box-sizing solltest Du Dir überlegen, ob Du nicht lieber sowas wie

*, ::before, ::after {
   box-sizing: border-box;
}

an den Anfang deines CSS stellst, um ein konsistentes box-sizing Modell für deine ganze Seite zu haben.

Rolf