webentwicklung-frage-antwort-db.com.de

Erstellen Sie einen Rasterelementbereich bis zur letzten Zeile/Spalte

Kann ich von der ersten bis zur letzten Zeile eine Gitterelementspanne erstellen, wenn ich die Anzahl der Zeilen nicht kenne?

Nehmen wir an, ich habe das folgende HTML mit einer unbekannten Anzahl von Boxen.

Wie kann ich den dritten .box-Bereich von der ersten bis zur letzten Gitterlinie machen? 

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

20
jbe

Sie können grid-row-start zu dieser Box css hinzufügen und sie so einstellen, dass sie eine absurd hohe Zahl umfasst.

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%; 
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
  grid-row-start: span 9000;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Bearbeiten - Haftungsausschluss:

Dies ist eine nicht optimale Lösung und funktioniert nicht in jedem Browser. Seien Sie vorsichtig! Obwohl dies bei einigen Browsern (Chrome) zu funktionieren scheint, erzeugen andere Browser (Firefox) die absurde Anzahl von Zeilen, die Probleme verursachen.

11
Hodrobond

Kann ich von der ersten bis zur letzten Zeile eine Gitterelementspanne erstellen, wenn ich die Anzahl der Zeilen nicht kenne?

Eine natürliche Grid-Lösung für dieses Problem scheint in der aktuellen Spezifikation (Stufe 1) zu fehlen. Die Antwort wäre also "nein", streng mit den Eigenschaften des Rasters.

Wie in diese Antwort ausgeführt, kann es jedoch mit absoluter Positionierung möglich sein.


Während das CSS-Grid keinen Rasterbereich über alle Spalten/Zeilen eines implizites Grid ziehen kann, kann es den Job in einem explizites Grid ausführen.

Verwenden Sie negative ganze Zahlen.

Hier sind zwei interessante Abschnitte in der CSS-Grid-Spezifikation:

7.1. Das explizite Gitter

Numerische Indizes in den Rasterplatzierungseigenschaften zählen von den Kanten aus des expliziten Gitters. Positive Indizes zählen von der Startseite, Negative Indizes zählen von der Endseite.

und hier...

8.3. Zeilenbasierte Platzierung: Die Eigenschaften grid-row-start, grid-column-start, grid-row-end und grid-column-end

Wenn eine negative Ganzzahl angegeben wird, zählt sie stattdessen in umgekehrter Reihenfolge und beginnt mit vom Ende des expliziten Gitters.

Anders ausgedrückt, wenn Sie mit einem expliziten Raster arbeiten, einem Raster, das Sie mit diesen Eigenschaften definieren:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas

... Sie können eine Rasterfläche über alle Spalten legen, indem Sie diese Regel festlegen:

grid-column: 3 / -1;

Dies sagt dem Gitterbereich, dass es sich von der dritten Spaltenzeile bis zur letzten Spaltenzeile erstreckt.

Das Gegenteil wäre:

grid-column: 1 / -3;

Auch diese Methode funktioniert nur in expliziten Rastern. 

7
Michael_B

Eine Lösung, die tatsächlich funktioniert hat, um position: absolute; für das Element festzulegen, das Sie bis zum Ende vergrößern möchten. Dies hat seine Nachteile, kann aber in manchen Fällen lebensrettend sein. Hier ist ein vollständiges Beispiel:

.grid {
  display: grid;
  grid-template: auto / auto 22px auto;
  position: relative;
}

.vline {
  position: absolute;
  height: 100%;
  width: 2px;
  background-color: black;
  grid-column: 2 / span 1;
  margin: 0 10px;
}

.grid h1:nth-child(1) { grid-row: 1; grid-column: 1; text-align: right; }
.grid p:nth-child(2) { grid-row: 2; grid-column: 1; text-align: right; }
.grid h1:nth-child(3) { grid-row: 3; grid-column: 3; }
.grid p:nth-child(4) { grid-row: 4; grid-column: 3; }
.grid h1:nth-child(5) { grid-row: 5; grid-column: 1; text-align: right; }
.grid p:nth-child(6) { grid-row: 6; grid-column: 1; text-align: right; }
.grid h1:nth-child(7) { grid-row: 7; grid-column: 3; }
.grid p:nth-child(8) { grid-row: 8; grid-column: 3; }
p, h1 { margin: 0; padding: 0; }
<div class="grid">
  <h1>1.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>2.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <h1>3.</h1>
  <p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>4.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <div class="vline"></div>
</div>

2
Fanus du Toit

Wenn dies noch nicht möglich erscheint, können Sie die Struktur ändern und das Gitter verschachteln. 

Verwenden Sie JavaScript, um das dritte Feld herauszunehmen und neben dem ursprünglichen Gittercontainer zu platzieren, wenn Sie dies nicht im Voraus tun können. 

.container {
    display: grid;
    grid-template-columns: 65% 35%;
}

.nested_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-template-rows: auto;
}

.box {
    background-color: blue;
    padding-bottom: 20px;
    border: 1px solid red;
}

.side {
    background-color: yellow;
    grid-column: 1 -1;
    border: 1px solid red;
}
<div class="container">
    <div class="nested_grid">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>

0
Duck