Fortgeschrittene CSS-Grid-Techniken

Vorlesung 10: Fortgeschrittene CSS-Rastertechniken

Willkommen zur zehnten Vorlesung des Kurses „Basic to Brilliance“. In dieser Vorlesung werden wir tiefer in fortgeschrittene CSS-Grid-Techniken eintauchen. Mit diesen Techniken können Sie noch komplexere und reaktionsfähigere Layouts erstellen. Am Ende dieser Vorlesung werden Sie in der Lage sein, mit Rasterbereichen und automatischer Rasterplatzierung zu arbeiten und CSS Grid mit anderen Layoutsystemen wie Flexbox zu kombinieren.

1. Rasterbereiche

Rasterbereiche ermöglichen es Ihnen, Abschnitten Ihres Rasters Namen zuzuweisen, was die Verwaltung und Visualisierung Ihres Layouts erleichtert.

• Beispiel: Benennen von Rasterbereichen für ein Layout mit Kopfzeile, Seitenleiste, Inhalt und Fußzeile.

HTML:

<div class="grid-container">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

In diesem Beispiel:

• Rasterbereiche: Die Eigenschaft „grid-template-areas“ definiert ein Layout mit drei Abschnitten: einer Kopfzeile, die sich über zwei Spalten erstreckt, einer Seitenleiste und dem Hauptinhalt in der Mitte sowie einer Fußzeile.
• Durch die Zuweisung von Rasterelementen (Kopfzeile, Seitenleiste usw.) zu bestimmten Bereichen können Sie das Layout effektiver steuern.

2. Automatische Rasterplatzierung

CSS Grid verfügt über eine automatische Platzierungsfunktion, die Rasterelemente automatisch positioniert, wenn sie nicht explizit platziert werden. Sie können steuern, wie dies funktioniert, indem Sie Grid-Auto-Flow verwenden.

• Werte:

  • Zeile: Elemente werden Zeile für Zeile platziert (Standard).
  • Spalte: Elemente werden Spalte für Spalte platziert.
  • dicht: Elemente werden in leere Räume im Raster gepackt.

• Beispiel:
  
  

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row dense; /* Auto-places items and packs them densely */
  }

In diesem Fall werden Rasterelemente Reihe für Reihe platziert und kleinere Elemente füllen etwaige Lücken.

3. Verwendung der Funktion minmax()

Mit der Funktion minmax() können Sie einen Bereich für Rasterspuren definieren, beispielsweise die Angabe der minimalen und maximalen Größe, die eine Rasterspur annehmen kann.

• Beispiel:

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

In diesem Beispiel:

• Das Raster besteht aus drei Spalten.
• Jede Spalte ist mindestens 150 Pixel breit, kann aber vergrößert werden, um den verfügbaren Platz auszufüllen (1 Fr).

4. Raster automatisch ausfüllen vs. automatisch anpassen

Sowohl automatisches Ausfüllen als auch automatische Anpassung werden zum Erstellen dynamischer Raster verwendet, sie funktionieren jedoch etwas anders:

• Automatisch ausfüllen: Fügt so viele Spalten wie möglich hinzu, auch wenn diese leer sind.

• Auto-Fit: Verkleinert oder vergrößert die Spalten, um sie an den verfügbaren Platz anzupassen.

• Beispiel: Auto-Fit- und Auto-Fill-Vergleich.
  

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

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

Beide Optionen passen die Anzahl der Spalten automatisch an den verfügbaren Platz an, aber durch die automatische Anpassung werden leere Spalten ausgeblendet.

5. CSS Grid mit Flexbox kombinieren

Während sich CSS Grid hervorragend zur Strukturierung des Gesamtlayouts eignet, eignet sich Flexbox perfekt zur Steuerung der Ausrichtung innerhalb einzelner Elemente. Sie können beides kombinieren, um verschiedene Teile Ihres Layouts zu bearbeiten.

• Beispiel: Verwendung von CSS Grid für das Hauptlayout und Flexbox für die Ausrichtung innerhalb von Rasterelementen.

HTML:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="content">
    <div class="flexbox-item">Item 1</div>
    <div class="flexbox-item">Item 2</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS:

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

.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flexbox-item {
  padding: 20px;
  background-color: #ddd;
}

In diesem Beispiel:

• Rasterlayout: Das Gesamtlayout ist mit CSS Grid strukturiert, mit Kopfzeile, Inhalt und Fußzeile.
• Flexbox: Der Inhaltsbereich verwendet Flexbox, um darin enthaltene Elemente auszurichten.

6. Implizite vs. explizite Gitter

Raster können explizit (mithilfe von Grid-Template-Columns und Grid-Template-Rows) oder implizit (wobei neue Tracks automatisch erstellt werden) definiert werden.

• Explizites Raster: Sie definieren die Anzahl der Zeilen und Spalten.

• Implizites Raster: Das Raster erstellt automatisch Zeilen oder Spalten, um zusätzliche Elemente aufzunehmen.

• Beispiel:
  

  .grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-auto-rows: 50px; /* Implicitly adds rows */
  }

In diesem Fall erstellt das Raster automatisch neue Zeilen, wenn mehr Elemente hinzugefügt werden, als in die definierten Spalten passen.

7. Erstellen eines ganzseitigen Rasterlayouts

Lassen Sie uns CSS Grid verwenden, um ein responsives ganzseitiges Layout mit einer Kopfzeile, einem Hauptinhaltsbereich, einer Seitenleiste und einer Fußzeile zu erstellen.

HTML:

<div class="grid-container">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="main-content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh; /* Full height layout */
}

.header {
  grid-area: header;
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

.sidebar {
  grid-area: sidebar;
  background-color: #f4f4f4;
  padding: 20px;
}

.main-content {
  grid-area: main;
  padding: 20px;
}

.footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}

In diesem Beispiel:

• 網格區域：版面配置由標題、側邊欄、主要內容和頁腳組成。
• 網格會自動調整每個部分的高度，填滿整個視口高度。

練習運動

1. 使用 CSS 網格建立帶有標題、側邊欄、主要內容和頁腳的響應式部落格佈局。
2. 使用 grid-template-areas 定義結構。
3. 透過調整不同螢幕尺寸上的列數來使版面響應。

下一步： 在下一課中，我們將探索 CSS 定位 以及如何使用絕對、相對和固定等屬性來定位元素。準備好進一步增強您的佈局控制！

在 LinkedIn 上關注我

裡多伊‧哈桑

Das obige ist der detaillierte Inhalt vonFortgeschrittene CSS-Grid-Techniken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!