Elemente, die sich über alle Spalten/Zeilen mit CSS grid layout

Mit dem CSS Grid Layout Module schnell Versand in Firefox und Chrome, ich dachte, ich würde versuchen in den Griff zu bekommen, wie es zu benutzen.

Ich habe versucht, zu erstellen eine einfache raster mit einer Sache a spanning der linken Seite alle Zeilen, mit den anderen Sachen ( b , c, d, e usw.) auf der rechten Seite der einzelnen Zeilen. Die Menge der Elemente auf der rechten Seite der Zeilen ist variabel, so könnte es eine beliebige Kombination von b, c, d, e usw., also ich bin mit der grid-auto-rows Eigenschaft. Als solcher, ich kann nicht definieren, eine Feste Anzahl von Zeilen für a zu überbrücken, aber ich möchte a erstrecken alle verfügbaren Zeilen.

CSS:

#container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-rows: auto;
    grid-template-columns: [left] 4rem [right] 1fr;
    margin: 0rem auto;
    max-width: 32rem;
}
#a {
    background: lightgreen;
    grid-column: left;
    grid-row: 1 / auto;
    justify-self: center;
}
#b {
    grid-area: auto / right;
    background: yellow;
}
#c {
    grid-area: auto / right;
    background: pink;
}
#d {
    grid-area: auto / right;
    background: lightskyblue;
}
#e {
    background: plum;
    grid-area: auto / right;
}

HTML:

<div id="container">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
    <div id="e">e</div>
</div>

Was sollte ich tun, um a erstrecken sich über alle Zeilen, ohne zu wissen, wie viele Zeilen es am Ende wird?

  • Ich bin Graben in CSS Grid auch und ich habe genau das gleiche problem. Ich fühle mich wie es ist etwas einfach, ich bin fehlt.
  • Ich Schreibe dies als eine vollständige Antwort, wenn ich eine Sekunde, aber der Schlüssel ist, ein raster innerhalb eines Rasters. So stellen Sie anderen div-neben 'einem', der hält, b, c, d, e und der ganze rest - nennen wir es mal 'content_holder'. Fügen Sie dann display: grid; zu 'content_holder'. Es wird automatisch der Größe des Inhalts und 'a' wird automatisch die Größe es.
  • Ich bin mit dem gleichen Problem. Supossedly grid-row: 1 / -1 sollte es tun, aber es funktioniert nicht mit auto-Zeilen offenbar 🙁
InformationsquelleAutor Marlius | 2017-02-15
  1. 56

    Ich hatte die gleiche situation und fand eine saubere Lösung.

    Statt mit einem riesigen row-span-Wert, versuchen Sie:

        grid-column: 1/-1;

    Als negative Zahl zählt von der rechten Seite, dieser code gibt die raster-Spalte am Ende der letzten Spalte.

    • Schöne Lösung, war für mich in dem Fall, dass ich hatte 1-Zelle, die ich wollte erstreckt sich über die gesamte Breite und einer Reihe von anderen Zellen, die ich wollte zu 1 Zelle Breite. Definition grid-column: 1 / span X war das brechen der Reaktionsfähigkeit für mich und das es behoben.
    • Leider, das funktioniert nicht, wenn die Anzahl der Spalten ist dynamisch und unbekannt. Wo die Anzahl der Spalten ist nicht bekannt, die Lösung, die ich gefunden habe, ist position: absolute; und width: 100%; auf das element erstreckt sich über alle Spalten, und fügen Sie position: relative; zu den Eltern.
    • Nach ein paar Tagen Kampf mit css, Jonny Grün, der Kommentar, was schließlich habe es funktioniert (mit dem Zusatz von height: 100%; auf das element span).
    InformationsquelleAutor Harry Le
  2. 3

    Könnten Sie mit einem hudge Wert der Zeile erstrecken (zumindest so, wie viel Sie glauben, dass maximal Zeilen werden könnte) :

    CSS:

    #container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-rows: auto;
  grid-template-columns: [left] 4rem [right] 1fr;
  margin: 0rem auto;
  max-width: 32rem;
}
#a {
  background: lightgreen;
  grid-column: left;
  grid-row-start: 1;
  grid-row-end: span 1000;/* hudge value ... will at least span so many rows */
  justify-self: center;/* ? what did you mean here ? */
  /* did you mean : */
  display:flex;
  align-items:center;
}
#b {
  grid-area: auto / right;
  background: yellow;
}
#c {
  grid-area: auto / right;
  background: pink;
}
#d {
  grid-area: auto / right;
  background: lightskyblue;
}
#e {
  background: plum;
  grid-area: auto / right;
}

    HTML:

    <div id="container">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</div>

    oder meinten Sie:

    CSS:

    #container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-rows: auto;
  grid-template-columns: [left] 4rem [right] 1fr;
  margin: 0rem auto;
  max-width: 32rem;
}
#a {
  background: lightgreen;
  grid-column: left;
  grid-row-start: 1;
  grid-row-end: span 1000;/* hudge value ... will at least span so many rows */
  align-self: center;
  justify-self:center
  }
#b {
  grid-area: auto / right;
  background: yellow;
}
#c {
  grid-area: auto / right;
  background: pink;
}
#d {
  grid-area: auto / right;
  background: lightskyblue;
}
#e {
  background: plum;
  grid-area: auto / right;
}

    HTML:

    <div id="container">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</div>

    Hier ist ein codepen zu spielen live.

    • Danke. Leider funktioniert dies nur richtig, wenn grid-row-gap ist nicht angegeben. Wenn grid-row-gap angegeben ist, wird der renderer legen Sie so viele Lücken da sind hudge Zeilen....
    • (justify-self: center; wird nur verwendet, weil ich vertikal ausgerichteten text in meinen tests, die ich wollte in die Mitte der Spalte. Ich sollte haben es entfernt von dem Beispiel, das ich gepostet. Tut mir Leid!)
    • für die grid-row-gap, können Sie es in Rand . Ich gabelte meinen vorherigen Stift hinzufügen, um die margin (Abstand) und das schreiben-Modus .codepen.io/gc-nomade/pen/ygwbyv (dort war bereits eine Lücke Beispiel auf das Dritte Beispiel in der ersten codepen codepen.io/gc-nomade/pen/xgBVKB,:) . auch die Zeilenhöhe sollte nicht angegebenen anderes als auto. ein weiteres Beispiel mit javascript zu setzen, der span-Wert erforderlich : codepen.io/gc-nomade/pen/BpZZQW (bezogen auf eine ähnliche Frage)
    • die jquery-Stift revisited mit dem gap-Wert codepen.io/gc-nomade/pen/pRYPwK
    • Interessant, dieser Ansatz funktioniert, wenn Sie mit einem großen negativ index: row-grid: 1 / -1000. Eine positive span-index jedoch scheitert, weil Sie auf Basis der explizite grid lines, z.B. die Zeilen, die Sie erklären, von denen Sie keinen haben. CSS-Grid-Referenz
    • Können Sie mir sagen, wo es scheitert. Tatsächlich raster ist noch experimentell und spec noch in der Entwicklung (grid-row : span all; als für Spalte wäre nützlich), Für ddie Browsern in denen ich getestet , es funktioniert (FF & webkit), Der andere (& solid) Ansatz ist die Verwendung von javascript Anzahl Elemente zum festlegen der Zeilen erstrecken. so kommentierte früher und verknüpft, um ein Beispiel 😉
    • Von fehlschlägt ich bezog mich auf deine obige Gespräch über grid-row-gap. Ich gehe ab der W3-Dokument, das ich verlinkt; "Wenn eine negative ganze Zahl angegeben ist, stattdessen zählt, in umgekehrter Richtung, ausgehend von der end Kante des expliziten grid". Bei einem negativen index ist eine Reine CSS-Lösung, aus mir unbekannten Gründen.
    • okay, guter Punkt-id nicht beachten !!

    InformationsquelleAutor G-Cyr
Schreibe einen Kommentar