Dreispaltiges Grid-Design

Ein dreispaltiges responsives Design kann elegant mit einem Grid-Layout aufgesetzt werden. Wenn nur zwei Elemente nebeneinander passen, wird das dritte auf einer neuen Zeile fensterfüllend platziert.
Nummer 1 Nummer 2 Nummer 3 (Anmerkung: im Blog-Design passen keine drei Cards nebeneinander)

Grids – die Ergänzung zu Flexboxen

Grids werden üblicherweise für die Struktur ganzer Webseiten eingesetzt. Man kann wunderbar unterschiedlichen Bildschirmgeometrien optimierte Layouts zuweisen.

Man kann aber auch sehr elegant hochflexible ein- bis dreispaltige Darstellungen realisieren.

Diese Design-Technik wird hier zur Darstellung der Ankündigungsboxen eingesetzt.

Siehe Dienstleistungsspektrum unter Web, Anwendungsbeispiele in der Automation und Support bei IB-Ruby.

Das Setup

Es sollen drei Elemente, in diesem Fall Shoelance-Cards, nebeneinander platziert werden.

Passen nicht alle Elemente nebeneinander, werden so viele Elemente platziert, wie Platz ist. Passen zwei Elemente nebeneinander, dann soll das dritte Element die gesamte Breite des Bildschirms (bzw. des Fensters) einnehmen. Passen weniger als zwei Elemente nebeneinander, wird alles untereinander angeordnet.

HTML

Der HTML-Teil ist sehr einfach:

<cards>
 <sl-card>
   {{ inhalt 1 }}
 </sl-card>
 <sl-card>
   {{ inhalt 2 }}
 </sl-card>
 <sl-card>
   {{ inhalt 3 }}
 </sl-card>
</cards>

CSS

Für die Formatierung ist, wie gewohnt, CSS zuständig.

cards{ 
  width: 100vw;                                      /* gesamtes. Fenster           */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: inherit;                              /* Verteilung in der Senkrechten*/
  justify-content: stretch;                          /* Nutzung der Bildschirmbreite */
  column-gap: var(--sl-spacing-2x-large);
  row-gap: var(--sl-spacing-2x-large);
  & :nth-of-type(3) { grid-column: 1 / -1; }        /* gesamten (Rest-)Bereich für   */
                                                    /* das dritte Element reservieren*/
  @media( min-width: 1130px ){ & :nth-of-type(3) { grid-column: auto }
}

Alle Elemente zwischen <cards> und </cards> werden gemäß des definierten Grid-Templates dargestellt. Die maximale Breite ist 320px. Je größer das Fenster, desto mehr Elemente passen nebeneinander.

Das dritte Element erfährt eine Sonderbehandlung. Es erstreckt sich über zwei Grid-Elemente. Falls genügend Platz ist, wird es einfach als letztes in der Reihe platziert. Falls es aber mangels Platz auf die zweite Reihe verschoben wird, nimmt es beide Spalten ein.
Diese Sonderbehandlung wird für kleine Bildschirmgrößen zum Abschluß wieder aufgehoben.