CSS - Grid - Grid in Zelle mit Abstand drum herum

[ebody]

Hallo,

ich möchte ein Grid in eine Grid Zelle einbauen. In der Zelle soll ein Abstand um das "interne" Grid (dunkel grün) sein.

Ich habe verschiedene Varianten schon probiert (siehe auskommentierten Code), aber ich bekomme einen Abstand bisher nur mit margin für die dunkelgrüne Box hin, hierbei überlappt die Box unten die Zelle.

Normalerweise würde ich padding in der hellgrünen Box verwenden, aber das funktioniert nicht.

Hat jemand einen Tipp wie ich die dunkelgrüne Box in der hellgrünen Box zentriert mit etwas Abstand drum herum darstellen kann?

Gruß ebody

[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

[ebody]

Hallo Rolf,

vielen Dank für die vielen Infos.

Ich kenne grid-template-areas, aber diese Angabe habe ich so noch nie gesehen:

grid: 'nav     nav    ' auto
          'content sidebar' minmax(200px, 1fr)

Werde ich probieren und mir merken.

Ich hatte gestern aus #sidebar ebenfalls ein Grid gemacht und darin align-items: center; verwendet. Das hat funktioniert. Die anderen Hinweise werde ich mir noch anschauen.

Gruß ebody

[Rolf B]

Hallo ebody,

Werde ich probieren und mir merken.

So bitte nicht merken. Die Folgezeile / 1fr 100px; gehört unbedingt dazu.

Für die Eigenschaften grid-template-areas, grid-template-columns und grid-template-rows gibt es die Sammeleigenschaft grid-template. Die Zeichenketten für die Zeilennamen werden jeweils um die Höhe dieser Zeile ergänzt (also der jeweilige Wert aus grid-template-rows dorthin gesetzt. Dann kommt ein Schrägstrich und die Werte aus grid-template-columns.

Ich hätte also statt der Eigenschaft grid auch die Eigenschaft grid-template hinschreiben können.

Aber: Es gibt eine weitere Verdichtungsstufe durch die Kombination von grid-template mit grid-auto-rows und grid-auto-columns zu grid. Wenn man speziellen Werte für auto-rows und auto-columns nicht verwendet, hat grid die gleiche Wirkung wie grid-template.

Artikel im Selfwiki

Rolf

[borisbaer]

Hallo ebody,

du hast in #content das Semikolon nach box-sizing: border-box (Zeile 33) vergessen. Wenn du das setzt, dann funktioniert das auch mit dem padding in #content.

Grüße
Boris

[Rolf B]

Hallo borisbaer,

du hast in #content das Semikolon nach box-sizing: border-box (Zeile 33) vergessen. Wenn du das setzt, dann funktioniert das auch mit dem padding in #content.

Ich weiß nicht, auf welcher Grundlage Du diese Aussage machst. Hast Du selbst experimentiert und hinter der Zeile 33 noch weitere Eigenschaften für #content notiert gehabt?

Denn grundsätzlich ist es so, dass das Semikolon für die letzte Eigenschaft in einer CSS Regel zwar schön für's Auge ist und Denkarbeit beim Ergänzen weiterer Eigenschaften spart, aber zwingend erforderlich ist es nicht. Zumindest nicht in Chrome.

Übrigens ist mir gerade eingefallen, dass die #content Box, wenn sie nur für den hellgrünen Rand da ist, auch durch eine 25px breite Border an #textBox realisiert werden könnte. Das erspart unnötiges Markup. Aber ob das passt, hängt von der realen Seite ab, auf der das eingesetzt werden soll.

Rolf

[borisbaer]

Hallo Rolf,

ich hab’s einfach ausprobiert, weil padding in #content eigentlich funktionieren muss: https://jsfiddle.net/056d41my/.

Das mit dem optionalen Semikolon in der letzten Zeile wusste ich jedoch nicht.

Grüße
Boris

[Gunnar Bittersmann]

@@Rolf B

Denn grundsätzlich ist es so, dass das Semikolon für die letzte Eigenschaft in einer CSS Regel zwar schön für's Auge ist und Denkarbeit beim Ergänzen weiterer Eigenschaften spart, aber zwingend erforderlich ist es nicht. Zumindest nicht in Chrome.

In keinem Browser. Weil’s so in der CSS-Spezifikation steht. In der Grammatik:

ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration? [ ';' S* declaration? ]* '}' S*
  ;

Heißt: Nach der letzten Deklaration muss kein Semikolon stehen. Darf aber, denn nach einem Semikolon muss keine Deklaration folgen.

🖖 Живіть довго і процвітайте