CSS Grid – Ein tiefer Einblick

Vorlesung 9: CSS-Raster – Ein tiefer Einblick

Willkommen zur neunten Vorlesung des Kurses „Basic to Brilliance“. In dieser Vorlesung beschäftigen wir uns mit CSS Grid, einem leistungsstarken Layoutsystem, mit dem Sie problemlos komplexe Weblayouts erstellen können. Während sich Flexbox hervorragend für eindimensionale Layouts (Zeilen oder Spalten) eignet, bietet CSS Grid ein zweidimensionales Layoutsystem, mit dem Sie sowohl Zeilen als auch Spalten gleichzeitig steuern können.

Was ist CSS Grid?

CSS Grid ist ein Layoutsystem in CSS, das die Erstellung flexibler, reaktionsfähiger und gitterbasierter Layouts ermöglicht. Es ermöglicht Ihnen, Elemente in Zeilen und Spalten auszurichten und bietet so mehr Kontrolle über die Layoutstruktur als Flexbox.

Gitterterminologie

Bevor wir uns mit Beispielen befassen, machen wir uns mit einigen Schlüsselbegriffen vertraut:

• Gittercontainer: Das übergeordnete Element, das das Raster enthält.
• Rasterelemente: Die untergeordneten Elemente im Rastercontainer.
• Gitterlinien: Die horizontalen und vertikalen Trennlinien des Gitters.
• Gitterspuren: Der Raum zwischen zwei Gitterlinien, die Zeilen oder Spalten bilden.
• Gitterzellen: Die kleinsten einzelnen Einheiten im Gitter, die durch den Schnittpunkt einer Zeile und einer Spalte gebildet werden.

1. Grundlegende Gitterstruktur

Um Grid zu verwenden, wenden Sie display: grid auf den Container an.

• Beispiel:

  .grid-container {
    display: grid;
  }

Sobald Anzeige: Raster angewendet wird, werden die untergeordneten Elemente des Containers zu Rasterelementen.

2. Definieren von Rasterspalten und -zeilen

Mit den Eigenschaften „grid-template-columns“ und „grid-template-rows“ können Sie festlegen, wie viele Zeilen und Spalten Ihr Raster haben soll.

• Beispiel: Erstellen eines Rasters mit 3 Spalten und 2 Zeilen.

  .grid-container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
    grid-template-rows: 50px 150px;
  }

Dadurch wird ein Raster erstellt mit:

• 3 Spalten: Die erste Spalte ist 100 Pixel breit, die zweite 200 Pixel und die dritte 100 Pixel.
• 2 Zeilen: Die erste Zeile ist 50 Pixel hoch und die zweite 150 Pixel.

3. Verwendung von Brucheinheiten (fr)

CSS Grid führt die Brucheinheit fr ein, die einen Bruchteil des verfügbaren Platzes im Grid-Container darstellt. Dies ist eine flexible Möglichkeit, Platz zwischen Rasterelementen zu verteilen.

• Beispiel: Verwendung von fr zur gleichmäßigen Aufteilung des Raums.

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

In diesem Beispiel sind die drei Spalten gleich breit und nehmen jeweils einen Bruchteil des verfügbaren Platzes ein.

4. Rasterelemente platzieren

Mit den Eigenschaften „grid-column“ und „grid-row“ können Sie steuern, wo jedes Rasterelement platziert wird. Mit diesen Eigenschaften können Sie die Start- und Endpositionen der Elemente angeben.

• Beispiel:

  .grid-item {
    grid-column: 1 / 3; /* This item spans from column 1 to column 3 */
    grid-row: 1 / 2;    /* This item is placed in the first row */
  }

In diesem Fall erstreckt sich das Rasterelement über die ersten beiden Spalten, wird jedoch in der ersten Zeile platziert.

5. Gitterlücke

Die Grid-Gap-Eigenschaft fügt Abstand zwischen Rasterelementen hinzu, sowohl horizontal als auch vertikal.

• Beispiel: Lücken zwischen Spalten und Zeilen hinzufügen.

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
  }

Dadurch entstehen gleiche Lücken von 20 Pixeln zwischen allen Rasterelementen.

6. Automatische Anpassung und automatische Füllung

Auto-Fit und Auto-Fill sind leistungsstarke Funktionen, die es dem Raster ermöglichen, basierend auf der Größe des Containers automatisch so viele Spalten wie möglich zu platzieren.

• Auto-Fit-Beispiel:

  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

Hier passt das Raster automatisch auf so viele Spalten wie möglich und stellt sicher, dass jede Spalte mindestens 100 Pixel breit ist, aber wachsen kann, um den verfügbaren Platz auszufüllen.

Praktisches Beispiel: Ein einfaches Rasterlayout

Lassen Sie uns ein einfaches Rasterlayout mit CSS Grid erstellen.

HTML:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

In diesem Beispiel:

• Der .grid-Container verfügt über drei Spalten gleicher Breite, die mit „repeat(3, 1fr)“ erstellt wurden.
• Der Rasterabstand ist auf 10 Pixel eingestellt, um Platz zwischen den Rasterelementen zu schaffen.
• Jedes .grid-Element verfügt über Polsterung und Hintergrundfarbe zur besseren Sichtbarkeit.

7. Verschachtelte Gitter

Sie können Raster auch verschachteln, wobei ein Rasterelement selbst zu einem Rastercontainer wird. Dies ermöglicht komplexere Layouts.

• Beispiel:

  .nested-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }

Sie können dieses Konzept anwenden, um ein Raster innerhalb eines anderen Rasters zu erstellen und so eine detailliertere Kontrolle über Ihr Layout zu erhalten.

Responsive Design with CSS Grid

CSS Grid is great for responsive design. You can adjust the number of columns based on the screen size using media queries.

• Example: Creating a responsive grid.

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }

  @media screen and (max-width: 768px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 480px) {
    .grid-container {
      grid-template-columns: 1fr;
    }
  }

In this example:

• The grid starts with three columns.
• On screens smaller than 768px, the grid switches to two columns.
• On screens smaller than 480px, the grid collapses to a single column.

Practice Exercise

1. Create a webpage layout using CSS Grid with a header, main content, sidebar, and footer.
2. Use grid-template-columns and grid-template-rows to define the grid structure.
3. Make the layout responsive by adjusting the number of columns on different screen sizes.

Next Up: In the next lecture, we’ll explore Advanced CSS Grid Techniques, including grid areas, template layouts, and combining Grid with Flexbox. Stay tuned!

Follow Me on LinkedIn-

Ridoy Hasan

Das obige ist der detaillierte Inhalt vonCSS Grid – Ein tiefer Einblick. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!