CSS Grid Tutorial - Erstellen Sie 3 wunderschön einfache responsive Layouts

Blog

CSS Grid Tutorial - Erstellen Sie 3 wunderschön einfache responsive Layouts

Erstellen Sie 3 responsive CSS-Rasterbeispiele, um die Grundlagen dieses leistungsstarken Layoutsystems zu beherrschen.

Python Numpy Array-Form
  1. Reaktionsschneller 12-Spalten-Bootstrap-Ersatz.
  2. Mosaik-Fotogalerie.
  3. Gestaffeltes Animationsraster.

Die folgende Lektion enthält drei Beispiele für CSS-Grid-Layouts.

12-Spalten-Raster im Bootstrap-Stil

Grid kann die Menge an Code, die zum Erstellen reaktionsschneller Zeilen-/Spaltenlayouts erforderlich ist, erheblich reduzieren. Im Gegensatz zu einem Flex-basierten Grid wie Bootstrap benötigt es nicht viele Klassen im Markup, um die Kinder reaktionsfähig zu machen.

Das folgende Raster ist ein Beispiel für eine implizit Raster, weil wir die genaue Anzahl der Zeilen oder Spalten im Voraus nicht kennen. Stattdessen lassen wir CSS den verfügbaren Platz basierend auf der Gerätegröße ausfüllen.

HTML

1 2 3 4 5 6 7 8 9 10 11 12

CSS

.basic-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

Responsive Fotogalerie

Das nächste Raster ist eine responsive Fotogalerie, in der Fotos mehrere Zellen einnehmen können. Wie im vorherigen Beispiel ist es auch ein implizites Raster.

HTML

1 2 3

CSS

.photo-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 240px; } /* Medium screens */ @media screen and (min-width: 600px) { .card-tall { grid-row: span 2 / auto; } .card-wide { grid-column: span 2 / auto; } }

Animiertes explizites Raster

Das dritte Rasterbeispiel ist ein explizites 4x4-Raster, bei dem jedes Element nach Namen in einem bestimmten Bereich platziert wird. Die |_+_| -Eigenschaft kann Elemente im Raster positionieren, indem sie die |_+_| Eigentum an den Kindern.

Gelöschte E-Mails abrufen aol

HTML

grid-template-areas

CSS

grid-area

#css #webdev #html

www.youtube.com

CSS Grid Tutorial - Erstellen Sie 3 wunderschön einfache responsive Layouts

In diesem CSS-Grid-Tutorial erfahren Sie, wie Sie 3 wunderschön einfache responsive Layouts erstellen. Erstellen Sie 3 responsive CSS-Rasterbeispiele, um die Grundlagen dieses leistungsstarken Layoutsystems zu beherrschen.