marctrix: Grid-item über ganze Breite bei minmax-Verwendung

SELF-Forum

Grid-item über ganze Breite bei minmax-Verwendung

marctrix Homepage des Autors (Versionen)
– Informationen zu den Bewertungsregeln

Hej alle,

wenn ich mit CSS-Grid arbeite, möchte ich gerade dem Browser die Anordnung der Elemente überlassen. Das erspart eine Menge Artbeit in Bezug auf Ausrichtung u.ä. Nun frage ich mich gerade, wie man einzelnen Items sagen kann, dass sich diese „besonders“ verhalten sollen.

Erklärung: man nehme ein Grid, in dem sich die Items automatisch anordnen, wie den schönen Pen von Gunnar (@Gunnar Bittersmann ).

Dann möchte man beispielsweise dass Item Nummer 5 immer die gesamte Breite des Rasters einnimmt.

Irgendwie weiß ich nicht, wonach ich googeln muss… - oder finde ich nichts, weil das nicht geht? - Macht zugegebenermaßen nur beim ersten und letzten Item wirklich Sinn, sonst dürfte es seltsam aussehen. Es sei denn man verwendet grid-auto-flow: dense was wiederum zu Problemen bei der Tastatur-Reihenfolge führt und deswegen nur verwendet werden kann, wenn die Items keine fokussierbaren Elemente beinhalten.

Trotzdem: kann man einzelne Items breiter machen, wenn minmax verwendet wird?

Marc

Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten

  1. Grid-item über ganze Breite bei minmax-Verwendung

    marctrix Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hej marctrix,

    [Grid-items über mehrere Spalten bei Verwendung von autofill und minmax]

    Es geht mit grid-column-end: span 12; — ist aber irgendwie gehackt, weil man die Anzahl der Spalten ja nicht kennen will.

    Funktioniert also nur wenn man selber rechnet die Spaltenzahl vorgibt.

    Womit sonst könnte man die Breite beeinflussen. width: 100% funktioniert nicht (so was geht bei flexboxen)…

    Marc

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Grid-item über ganze Breite bei minmax-Verwendung

    Gunnar Bittersmann Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    @@marctrix

    Dann möchte man beispielsweise dass Item Nummer 5 immer die gesamte Breite des Rasters einnimmt.

    grid-column: 1/-1

    Trotzdem: kann man einzelne Items breiter machen, wenn minmax verwendet wird?

    grid-column-end: span 2 oder 3 oder …

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Grid-item über ganze Breite bei minmax-Verwendung

      marctrix Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hej Gunnar,

      @@Gunnar Bittersmann

      Dann möchte man beispielsweise dass Item Nummer 5 immer die gesamte Breite des Rasters einnimmt.

      grid-column: 1/-1

      Ach so geht das! - Danke!!!

      Trotzdem: kann man einzelne Items breiter machen, wenn minmax verwendet wird?

      grid-column-end: span 2 oder 3 oder …

      Wenn es nicht ganze Breite sein soll auch sehr hilfreich.

      Nochmal danke!!!

      Marc

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. Grid-item über ganze Breite bei minmax-Verwendung

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@marctrix

    Dann möchte man beispielsweise dass Item Nummer 5 immer die gesamte Breite des Rasters einnimmt.

    Nummer 5 nimmt die gesamte Breite des Inputs ein.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln