webentwicklung-frage-antwort-db.com.de

Wie kann man machen, dass CSS-Grid-Elemente verbleibenden Speicherplatz beanspruchen

Ich habe eine Karte mit CSS-Rasterlayout. Möglicherweise befindet sich links ein Bild, rechts oben ein Text und rechts unten eine Schaltfläche oder ein Link.

Wie kann ich im folgenden Code dafür sorgen, dass der grüne Bereich so viel Platz wie möglich beansprucht und gleichzeitig den blauen Bereich so wenig Platz wie möglich beansprucht?

Das Grün sollte den blauen Bereich so weit wie möglich nach unten drücken.

https://jsfiddle.net/9nxpvs5m/

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "one two"
    "one three"
}

.one {
  background: red;
  grid-area: one;
  padding: 50px 0;
}

.two {
  background: green;
  grid-area: two;
}

.three {
  background: blue;
  grid-area: three;
}
<div class="grid">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
</div>

13
Jens Törnell

Wenn Sie grid-template-rows: 1fr min-content; zu Ihrem .grid hinzufügen, erhalten Sie genau das, was Sie suchen :).

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr min-content;
  grid-template-areas:
    "one two"
    "one three"
}

.one {
  background: red;
  grid-area: one;
  padding: 50px 0;
}

.two {
  background: green;
  grid-area: two;
}

.three {
  background: blue;
  grid-area: three;
}
<div class="grid">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
</div>

Jens editiert: Für eine bessere Browserunterstützung kann dies stattdessen verwendet werden: grid-template-rows: 1fr auto;, zumindest in diesem Fall.

10
Kevin Powell

Ein Raster besteht aus einer Reihe von sich kreuzenden Zeilen und Spalten.

Sie möchten, dass die beiden Elemente in der zweiten Spalte ihre Zeilenhöhe automatisch an die Inhaltshöhe anpassen.

So funktioniert ein Gitter nicht. Solche Änderungen der Zeilenhöhe in der zweiten Spalte wirken sich auch auf die erste Spalte aus.

Wenn Sie das CSS-Grid verwenden müssen, würde ich dem Container beispielsweise 12 Zeilen angeben, die Elemente sollten dann je nach Bedarf Zeilen umfassen.

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: repeat(12, 15px);
}

.one {
  grid-row: 1 / -1;
  background: red;
}

.two {
  grid-row: span 10;
  background: lightgreen;
}

.three {
  grid-row: span 2;
  background: aqua;
}

.grid > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="grid">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

Ansonsten können Sie eine Flexbox-Lösung ausprobieren.

.grid {
  display: flex;
  flex-flow: column wrap;
  height: 200px;
}

.one {
  flex: 0 0 100%;
  width: 30%;
  background: red;
}

.two {
  flex: 1 0 1px;
  width: 70%;
  background: lightgreen;
}

.three {
  background: aqua;
}

.grid>div {
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="grid">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

2
Michael_B

Wenn Sie ein Raster verwenden und der Raster-Vorlagenbereich verwendet wird und Sie zufällig einem bestimmten Bereich eine Breite zugewiesen haben, wird automatisch ein Leerzeichen-Raster angezeigt. In dieser Situation lassen sich Raster-Vorlagen-Spalten Inhalt oder Max-Inhalt, damit es seine Position automatisch anpasst.

0
dean filigreti

Definitiv nicht die eleganteste Lösung und wahrscheinlich keine bewährte Methode, aber Sie könnten immer mehr Zeilen hinzufügen

"one two"

vor dem Teil, wo Sie haben

"one three"

so sieht es am Ende aus

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "one two"
    "one two"
    "one two"
    "one three"
}

Wieder ziemlich sicher, dass dies nur eine Umgehung ist und es bessere Lösungen gibt ... Aber das funktioniert, um fair zu sein.

0
gymnast66x

Ich bin neu in der Startaufstellung, also entschuldige mich, wenn dies nicht der Fall ist.

Ein möglicher Ansatz könnte die Gruppierung von two und three und die Verwendung von flexbox?

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "one two"
}

.one {
  background: red;
  grid-area: one;
  padding: 50px 0;
}

.wrap {
  grid-area: two;
  display: flex;
  flex-direction: column;
}

.two {
  background: green;
  flex: 1;
}

.three {
  background: blue;
}
<div class="grid">
  <div class="one">
    One
  </div>
  <div class="wrap">

    <div class="two">
      Two
    </div>
    <div class="three">
      Three
    </div>
  </div>
</div>

0
sol