1. Einführung
In den Entwicklertools werden jetzt die Fehlerbehebung für CSS-Raster unterstützt.
Wenn auf ein HTML-Element auf deiner Seite display: grid oder display: inline-grid angewendet wird, stehen dir im Elementbereich verschiedene Optionen zur Verfügung, mit denen du das Raster besser prüfen kannst.
Lerninhalte
In diesem Codelab lernen Sie, wie Sie CSS-Raster mit den Chrome-Entwicklertools debuggen.
- Funktion „Raster-Debugging“ im Elementbereich aktivieren/deaktivieren
- Raster-Overlay-Einstellungen im Layoutbereich anpassen
- Stile von Raster-Overlays bearbeiten
Voraussetzungen
- Ein funktionierender Computer und WLAN
- Chrome 87 und höher.
- Optional: Grundkenntnisse des CSS-Rasters
Vorgehensweise
Sie lösen dieses Rätsel mithilfe der CSS-Debbuging-Tools.
2. Einstieg
Klicken Sie auf den folgenden Link, um die Seite mit Rätseln zu öffnen:
Öffnen Sie dann auf der Seite mit den Rätseln die Chrome-Entwicklertools.
3. Raster-Overlay aktivieren
Prüfen Sie das Rätsel im Steuerfeld Elemente. Klicken Sie auf den Puzzle-Container-Knoten und konzentrieren Sie sich darauf:
<div class="chrome-puzzle">
Im Bereich Elemente befindet sich neben dem Puzzle-Container ein grid-Logo. Klicken Sie darauf, um das Raster-Overlay zu wechseln.
In diesem Video werden die oben erläuterten Schritte beschrieben.
4. Raster-Overlay-Anzeige anpassen
Momentan ist das Raster-Overlay mit den Zeilenzahlen zu sehen. Passen wir das Display an, damit wir das Rätsel lösen können.
Klicken Sie auf den Bereich Layout und wählen Sie im Drop-down-Menü Linienlabels ausblenden aus, um die Liniennummern im Raster-Overlay auszublenden.
Sehen Sie sich jetzt den Bereich Styles an und untersuchen Sie das Puzzle-Container-CSS. Sie enthält eine grid-template-areas-Property:
.chrome-puzzle {
grid-template-areas:
"top-left top-right"
"bottom-left bottom-right";
}
Anhand der Namen kannst du das Rätsel lösen. Die Einstellungen lassen sich aktualisieren, damit sie auf dem Bildschirm angezeigt werden.
Kehren Sie zum Bereich Layout zurück und klicken Sie das Kästchen Bereichsnamen anzeigen an.
Super! In der Rasteransicht werden jetzt die Bereichsnamen der einzelnen Puzzleteile angezeigt.
In diesem Video werden die oben erläuterten Schritte beschrieben.
5. Rätsel lösen
Sobald die Namen der Bereiche auf dem Bildschirm angezeigt werden, können wir an diesem Puzzle arbeiten.
Ordnen Sie die einzelnen Rätsel der richtigen Stelle zu.
Zuerst prüfen wir das erste Geduldsspiel.
<img src="...-grid-4.png" class="piece-4">
Suchen Sie im Bereich Stile nach der CSS-Klasse:
.piece-4 {
grid-area: auto;
}
grid-area ist derzeit auf auto gesetzt. Du kannst sie mit dem richtigen Bereichsnamen aktualisieren.
Zu welchem Bereich gehört dieser Teil? Lasst uns wissen, dass der richtige Bereich dieses Teils top-right ist. Anschließend kannst du den Wert auto durch top-right ersetzen. Änderungen sofort visualisieren Das Stück wird jetzt im Bereich top-right platziert.
In diesem Video werden die oben erläuterten Schritte beschrieben.
Aktualisiere die grid-area Stück jedes Teils, bis du das Rätsel gelöst hast!
6. Glückwunsch!
Glückwunsch! Dieses Codelab ist abgeschlossen.
Weitere Informationen zu CSS-Raster-Tools finden Sie in der Dokumentation.