CSS durch Beispiel lernen

1. Kurs-Einführung: [MUSIK] Hi, da. Wieder willkommen. Ich bin Daniel und ich mache jetzt seit mehr als 15 Jahren mit dem Mellow One. Dies ist mein Kurs über das Erlernen von CSS Grid mit gutem Beispiel. CSS Grid neben der Pestbox hat die letztere Art und Weise vereinfacht, wie wir das Seitenlayout generieren. Der Umfang dieses Kurses besteht darin, Ihnen das nötige Wissen zur Verwendung von Ihnen das nötige Wissen zur CSS Grid in Ihren Webseiten und Schnittstellen zu vermitteln. Ich werde dies tun, indem ich ein paar kleine Beispiele baue . Wir fangen an. Wir haben einige einfache Dinge wie das Einrichten eines Basisrasters, wie man seine Elemente definiert oder Elemente innerhalb von Sets platziert. Danach werden wir schrittweise zu verschiedenen Möglichkeiten voranschreiten , wie wir unsere Raster reagieren können und wie wir das CSS-Grid mit anderen Layout-Managern wie Flexbox und Mode kombinieren können. Wir werden viel programmieren in den Partituren und jede Lektion hat ihre Übungsdateien und Lösungen für den gesamten Code. Ich freue mich darauf, Sie bei der nächsten Lektion zu sehen, in der wir mit dem Aufbau für das CSS Grid-Projekt beginnen werden. [MUSIK] 2. Beispiel 1 – Projekteinführung: Hallo und willkommen. Dies werden wir in diesem ersten Beispiel des CSS Grid-Kurses erstellen . Zuerst werden wir sehen, wie ein Basisraster eingerichtet wird, wie es funktioniert, wie wir die Zeilen und Spalten definieren und wie wir die Größen definieren. Apropos Größen, wir werden eine wirklich nette Funktion von CSS Grid namens minmax sehen eine wirklich nette Funktion von CSS Grid namens , mit der wir reaktionsschnelle Layouts erstellen können, ohne Medienabfragen zu verwenden. Ja, das hast du richtig gehört. Dieses Layout ändert sich basierend auf den Dimensionen des Ansichtsfensters, verwendet jedoch keine Medienabfrage. Außerdem werden wir sehen, wie Elemente manuell in Zellen positioniert werden oder wie sie sich über mehrere Zellen erstrecken. Mal sehen, was wir in den Startdateien für dieses Beispiel haben. Jede Lektion hat einen eigenen Ordner mit einer Startdatei , an der Sie arbeiten können, und die endgültige Datei, die Sie am Ende jeder Episode überprüfen können . Dies ist der Punkt, an dem wir anfangen werden. Beginnen Sie ab Lektion 1 diesen HTML-Code. Die HTML-Struktur ist ziemlich einfach. Wir haben einen großen Container namens items-grid, und in diesem Container haben wir einige Divs mit einer Klasse von Item und h4 plus einem Bild. Es gibt auch ein paar grundlegende CSS, nur die Hintergrundfarbe, einige Ränder und eine maximale Höhe für das Bild. Die Bilder stammen aus diesem GOT-Ordner namens houses, und hier sehen Sie jedes Bild, das im Beispiel verwendet wird. Sowohl das CSS als auch das HTML befinden sich in derselben Datei. Denken Sie jedoch daran, dass dies nur zu Bildungszwecken dient. Tu das nicht in einem echten Projekt. Lasst uns anfangen und sehen, wie wir von einem strukturierten Layout wie diesem zu diesem schönen Raster übergehen können einem strukturierten Layout wie diesem zu diesem , das wir hier haben. 3. Beispiel 1 – Grundlegende Raster-: Machen wir diesen Container zu einem CSS-Grid. Dafür gehe ich in die entsprechende CSS-Klasse, in diesem Fall das Artikelraster, und ich sage hier Raster anzeigen. Wenn wir speichern und aktualisieren, werden wir sehen, dass vorerst nichts passiert. Dies liegt daran, dass wir die Spalten oder die Zeilen unseres Rasters noch nicht definiert haben. Um die Spalten zu definieren, verwenden wir eine neue Eigenschaft namens grid-template-columns. Nehmen wir an, wir möchten unsere Karten zunächst auf zwei Spalten jeweils 200 Pixeln setzen, ich stelle einen Wert von 200 Pixel für die erste Spalte und danach einen weiteren Wert von 200 Pixel für die zweite Spalte. Wenn ich speichere und aktualisiere, wirst du jetzt sehen, dass alle Karten in diesem schönen Format mit zwei Spalten mit jeweils 200 Pixeln angezeigt werden in diesem schönen Format mit zwei Spalten mit jeweils 200 Pixeln angezeigt . Wir können noch einmal kommen, sagen wir nur um des Beispiels willen, und hier werde ich noch ein von 200 Pixeln hinzufügen und wir werden jetzt sehen , dass alle unsere Karten in diesem Layout mit neu angeordnet sind drei Spalten. Eine interessante Sache ist die Tatsache, dass wir die Anzahl der Zeilen nicht definiert haben. Wir haben nichts über die Anzahl der Zeilen festgelegt. Meistens ist dies ein übliches Muster da wir hauptsächlich nur die Anzahl der Spalten definieren und der Browser weiß, dass er den Inhalt basierend auf dieser Anzahl von Spalten automatisch anordnet. Grundsätzlich hatten wir hier insgesamt 10 Karten und sie sind automatisch in einem dreispaltigen Layout mit vier Reihen angeordnet , die ersten drei Reihen haben drei Elemente darin und die letzte hat nur einen Gegenstand. 4. Beispiel 1 – Die -: Wir sind in dieser Zeile nicht beschränkt, um nur Pixel zu verwenden. Wir können jede CSS-Maßeinheit verwenden. Wir können Prozentsätze verwenden, wir können Rems verwenden, wir können Ansichtsfenstereinheiten verwenden, wir können alles verwenden. Zum Beispiel kann ich hierher kommen und all diese auswählen und sagen, dass okay, ich möchte, dass jede Spalte aus drei Rems besteht. Wenn ich aktualisiere, werden wir jetzt sehen, dass wir dieses verkorkste Layout haben. Aber die Idee ist, dass wir dort jede Art von Einheiten hinzufügen können , die wir wollen. Aber wir werden wollen, dass unser gesamtes Layout in diesem freien Raum so weit wie möglich erweitert wird. Vielleicht ist eine Idee, die wir uns vorstellen können , Prozentsätze zu verwenden. Vielleicht versuchen wir hier alles von 33 Prozent zu machen und zu sehen, wie es läuft. Die Dinge sehen gerade viel organisierter aus. Aber wenn wir uns genauer ansehen, werden wir sehen, dass der Raum hier nicht die gleiche Breite hat wie der Raum hier drin. Meistens liegt das daran, dass wir 99 Prozent erhalten, wenn wir hier alles hinzufügen , also 33 Prozent plus 33 Prozent plus 33 Prozent, also werden wir hier immer noch ein Prozent frei haben. Wir können wieder hierher kommen und so etwas benutzen, um all diesen Raum abzudecken. Aber das CSS-Gitter wird auch mit einer neuen Maßeinheit geliefert, und diese Einheit wird als Bruchteil bezeichnet , die fr. Wenn du alles hier reinnimmst und wir es durch ein Fr ersetzen und wir aktualisieren werden, werden wir jetzt sehen, dass wir genau den gleichen Platz auf der einen oder anderen Seite haben . Wie diese separate Einheit funktioniert, ist, dass der Browser den gesamten verfügbaren Speicherplatz einnimmt. Teilt diesen Raum danach in Gesamtzahl der benötigten fr-Einheiten auf. In diesem Fall beträgt die Gesamtzahl der fr-Einheit drei, 1 plus 1 plus 1. Jede der Spalten befindet sich genau auf ein Drittel des gesamten verfügbaren Platzes. zum Beispiel Wenn wir zum Beispiel die mittlere Spalte nehmen, werden wir sie aus drei fr-Einheiten machen und wir werden aktualisieren, wir werden ein Layout sehen, das so aussieht. Was hier passiert, ist, dass die Gesamtzahl der fr-Einheiten fünf, 1 plus 3 plus 1 beträgt . Der Browser nahm den gesamten verfügbaren Speicherplatz und teilte ihn in fünf Einheiten auf. Die erste und die letzte Spalte werden auf ein Fr gehen, was 20 Prozent des Speicherplatzes bedeutet. der Zwischenzeit wird die Mittelsäule drei Fr, in diesem Fall 60 Prozent des Platzes, belegen. 5. Beispiel 1 – Grid: Wenn Sie sich unser Layout in diesem Moment ansehen, gibt es keinen Abstand zwischen den Zellen des Rasters. Es wird Fälle geben , in denen Sie den Abstand zwischen den Spalten steuern können, also den Abstand zwischen den Zeilen. Um dies zu erreichen, können wir mehrere Eigenschaften verwenden. Der erste wird die Lücke in der Rasterreihe sein. Mit ihm können wir den Abstand zwischen den Zeilen einstellen. Ich werde sagen, ich möchte 50 Pixel Abstand zwischen den Zeilen haben . Wir können auch die Rasterspaltenlücke verwenden. Wie Sie sich vorstellen können, steuern wir mit dieser Eigenschaft den Abstand zwischen den Spalten. Wenn ich speichere und dann aktualisiere, können wir jetzt sehen, dass wir den 50-Pixel-Abstand zwischen den Zeilen und den 10-Pixel-Abstand zwischen den Spalten haben. Es gibt auch eine Kurzschrift für die Lücken der Zeilen und Spalten. Anstatt zwei verschiedene Eigenschaften zu verwenden, kann ich dies löschen und sagen, dass ich eine Gitterlücke verwenden möchte. Anfangs können wir den Abstand zwischen den Zeilen, 50 Pixel wie zuvor und 10 Pixel für die Spalten definieren 50 Pixel wie zuvor . Wenn wir jetzt sparen, werden wir sehen , dass die Ausgabe genau dieselbe ist. Der einzige Unterschied besteht darin, dass wir nur eine Eigenschaft anstelle von zwei verschiedenen verwendet haben . Wenn wir möchten, dass dieser Abstand zwischen den Spalten und zwischen den Zeilen gleich ist, können wir ihm nur einen Wert von 10 Pixeln angeben. Wann immer wir aktualisieren, werden wir feststellen, dass es jetzt einen konstanten Unterschied von 10 Pixeln zwischen den Zeilen und den Spalten des Rasters gibt. So legen Sie die Lücke zwischen den Zellen in unserem CSS-Gitter fest. 6. Beispiel 1 – Wiederholungsfunktion: Unser Layout hat in diesem Moment nur drei Spalten. In der realen Welt können Sie jedoch auf Situationen stoßen, in denen Sie etwas wie 12 Spalten oder noch mehr benötigen . Lassen Sie uns unser Layout so gestalten, dass es in fünf Spalten passt. Anfangs scheint dieser ziemlich einfach zu sein. Ich werde hier nur zwei weitere Spalten von 1fr hinzufügen, und wenn wir uns aktualisieren, werden Sie sehen , dass alles wie erwartet aussieht. Ein Nachteil ist jedoch die Tatsache, dass diese Zeile etwas schwieriger zu lesen ist. Wir müssen ständig zählen , wie viele Dateien wieder da drin sind. In Situationen wie diesen kann ich also, anstatt mehrere Spalten oder mehrere Spalten zu schreiben, anstatt mehrere Spalten oder mehrere Spalten zu schreiben, wiederkommen und diese Rastervorlagenspalten nehmen und sagen, dass ich eine fünfmalige Wiederholung haben möchte und ein Fr. Diese Zeile ist genau die gleiche wie diese. Aber wenn man sie anschaut, ist der zweite etwas einfacher zu lesen. Wenn ich diesen lösche und aktualisiere, werden wir sehen, dass das Layout genau das gleiche ist, aber wir haben eine Zeile, die etwas einfacher zu lesen ist . Die Wiederholungsfunktion hat auch einen coolen Trick. Wir können ihm Muster anstelle von einfachen Werten geben. Was ich damit meine, sagen wir, dass wir ständig eine Spalte haben wollen , die 2fr ist und danach eine weitere Spalte, die nur 1fr ist, und danach wiederholen sie dies mustern noch eins. Was wir hier tun können, ist zu kommen und zu sagen, dass die erste Spalte 2frs sein muss und danach muss die nächste Spalte von 1fr sein und dieses Muster zweimal wiederholen. Wenn ich speichern und aktualisieren werde, werden wir sehen, dass wir dieses Raster erhalten haben, die erste Spalte von 2fr nach dieser von 1fr, danach eine von 2fr, und die letzte ist 1fr. Im Grunde hat es dieses Muster zweimal wiederholt. Wir können ihm auch Muster geben , wenn wir es so in unserem Code haben wollen. [HINTERGRUND] 7. Beispiel 1 – mit minmax: Auch wenn unser Layout ganz schön aussieht, hat es in diesem Moment ein kleines Problem. Wenn wir das Fenster verkleinern das Ansichtsfenster verkleinern, werden Sie feststellen, dass unsere Karten irgendwann geschnitten werden. Dies liegt daran, dass sie nicht genug Platz haben, um in unser fünfspaltiges Layout zu passen. Meistens liegt dies an dieser maximalen Höhe, auf einem Bild eingestellt ist, das auch eine Mindestbreite auslöst , die die Karte erfüllt. Was wir versuchen wollen, ist Spalten zu erstellen , die maximal ein Fr wachsen, aber niemals unter eine bestimmte Breite gehen werden. Im Grunde versuche ich hier zu sagen , dass wir diese Minmax-Funktion verwenden werden , die speziell für das CSS-Grid eingeführt wurde. Wir können definieren, dass eine Karte niemals unter 300 Pixel fällt und in ihrer maximalen Größe für ein Fr. Wenn wir speichern und aktualisieren, können wir immer noch einige Probleme sehen. Trotzdem passt unser Layout nicht ganz perfekt, aber zumindest haben die Karten jetzt eine Mindestbreite von 300 Pixeln. Um auch diesen horizontalen Bildlauf zu korrigieren, müssen wir tun anstatt zu sagen, dass wir alles in fünf Spalten einfügen . Ich verwende ein anderes Keyword für CSS-Gitter eingeführt und ist automatisch angepasst. Diese automatische Anpassung ist so etwas wie versuchen, so viele Spalten wie möglich anzupassen. Das wird maximal ein Fr dauern, wird aber niemals unter 300 Pixel liegen. Nachdem wir die Seite aktualisiert haben, können wir sehen, dass wir ein schönes Layout von zwei Spalten haben , die nicht unter 300 Pixel liegen. Wenn wir den Bildschirm vergrößern, werden Sie feststellen, dass das Layout versucht, so viele Spalten wie möglich anzupassen , mit der Annahme, dass niemals unter 300 Pixel liegen wird . Mit diesen beiden, dem Auto-fit und dem Minimax, erstellen wir im Grunde ein responsives Layout ohne Medienabfragen zu verwenden. 8. Beispiel 1 – Zellenplatzierung und -breitenbereich: Standardmäßig ordnet der Layout-Manager die Elemente in einem CSS-Raster automatisch an. Aber es gibt Fälle, in denen Sie möchten, dass ein Gegenstand wie eine bestimmte Position hat, sagen wir, diese Karte, das Lannister-Haus immer als erster Gegenstand in unserem CSS-Raster geliefert. Um dies zu erreichen, ich hier eine weitere Klasse hinzu, die als main bezeichnet wird. Diese Klasse wird den Gegenstand festgelegt, den wir zuerst erreichen möchten. Um die Position eines bestimmten Elements anzugeben, können wir die Rasterspalte verwenden , von der ich dieses Element sagen werde, ich möchte in die erste Spalte gesetzt werden. Wir können auch die Rasterzeile verwenden wenn wir auch die Zeile angeben möchten. Wenn wir jetzt sparen , schauen Sie sich diese Karte an. Wenn wir aktualisieren, werden wir sehen, dass die Karte jetzt in der ersten Spalte und in der ersten Zeile platziert wird. Darüber hinaus können wir diese beiden, die Rasterspalten und die Rasterzeile, verwenden , um diesen Artikel über mehrere Verkäufe zu erstrecken. Wenn wir wollen, sagen wir diese, um es größer zu machen, auch in dieser Spalte und auch in dieser Zeile. Was ich hier sagen werde, werde ich reinkommen und einen zweiten Parameter hinzufügen , der ihm sagt, dass ich von der ersten Spalte ausgehen und ihn über zwei Spalten erstrecken möchte . Ich mache genau das Gleiche mit dem Rohen. Wir sparen, wir werden sehen, dass unsere ursprüngliche Karte jetzt über zwei Zeilen und zwei Spalten verteilt ist . Und es wird auch gut spielen, wenn wir die Größe des Fensters ändern. 9. Beispiel 2 – Einführung und Projektbeschreibung: Mal sehen, was wir in diesem Beispiel bauen möchten . Wir haben ein Layout für die Homepage. Das Layout erfolgt auf der vollen Höhe des Bildschirms und besteht aus fünf Abschnitten. Es gibt diesen Hauptinhaltsbereich, der anfänglich zentriert ist und den größten Teil der Immobilien unseres Bildschirms einnimmt . Neben vier anderen sekundären Abschnitten haben wir 1, links 2, rechts 1 und rechts 2. Wenn wir die Größe unseres Fensters verkleinern, ändert sich dieses Layout und es wird vom dreispaltigen Layout in ein zweispaltiges Layout übergehen . Mal sehen, was wir in den Startdateien für dieses Beispiel haben . Wir haben zwei Dateien, wir haben einen Index-HTML und den Stil CSS. Der Index-HTML enthält nur das minimal notwendige Markup um dieses Ding zum Laufen zu bringen. Wir haben ein div, das der allgemeine Gap-Bug unseres Beispiels ist und eine Containerklasse hat. Darin gibt es fünf weitere Divs. Jedes div hat eine Klasse wie links 1, rechts 1, links 2, rechts 2. In der Mitte befindet sich dieses Haupt-Div, das den Hauptbereich unseres Inhalts enthält. In dem Stil von CSS sind es nur einige grundlegende CSS-Eigenschaften , die diese Ebene nur der Hintergrundfarbe für den allgemein ausgewählten Rahmen für unsere Zellen und die Schriftart verleihen Hintergrundfarbe für den allgemein ausgewählten Rahmen für Familie von serifenlosen. Dies ist der Code, den wir in diesen Startdateien haben. Sehen wir uns nun an, wie wir von einem einfachen Layout wie diesem zu einem gut angeordneten Inhalt übergehen werden, wie wir es hier haben. 10. Beispiel 2 - Definieren von benenden -Defining in einem CSS Grid: Das Namensvorlagen-Tag hier definiert Namen für die Abschnitte in unserem Design und weist diesen Namen danach Elemente zu. Mal sehen, wie wir diesem endgültigen Design nachahmen können. Wenn wir uns das ansehen, werden wir sehen, dass wir im Grunde fünf Abschnitte haben. Wir haben zwei Links- und Rechte und einen Hauptabschnitt. Wenn wir hierher gehen und uns besser ansehen können , wie das Raster aussehen wird, könnten unsere Namen in etwa so aussehen. Anfangs kann ich hier drin nennen, ist der Vorlagenname A, das ist Vorlagenname B, C, D. Das einzige, was es etwas spezieller ist , ist dieser zentrale Vorlagenname , der im Grunde genommen ist besteht aus zwei Zellen, die beide den gleichen Namen haben. In diesem Fall sage ich, dass es X ist. In diesem Sinne gehe ich in mein erstes Beispiel zurück, und hier müssen wir zuerst in den „Container“ gehen und die Tatsache definieren, dass dies ein Raster ist. Ich sage „Gitter anzeigen“. Der nächste Schritt besteht darin, die Vorlagenbereiche zu definieren. Ich sage „Grid-Vorlagenbereiche“, und ich füge jeweils eine Zeile hinzu. Anfangs sagten wir, dass wir mit dem Abschnitt A. beginnen Danach werden wir dieses X haben. Wir werden gehen, wenn Abschnitt B. Als nächstes werden wir unsere zweite Zeile mit dem Namen C haben, danach wieder X, und schließlich D. Wenn wir jetzt aktualisieren, hat sich das Layout ein wenig geändert, ist aber überhaupt nicht das, was wir wollen. Dies liegt daran, dass wir nicht zugeteilt haben, dass dies Abschnitt A ist, dies ist Abschnitt B, das ist Abschnitt X und so weiter. Dafür verwenden wir den Rasterbereich. Ich komme noch einmal hierher, sagen wir, das ist ein Rasterbereich mit dem Namen X, und danach füge ich vier Zeilen hinzu. Ich werde hier sagen, dass L1 Abschnitt A ist, R1 Abschnitt B ist, L2 Abschnitt C ist, und schließlich ist R2 Abschnitt D. Denken Sie daran, dass wir alle diese Klassen bereits den Komponenten von unser Raster. Das ist L1, das ist L2 und so weiter. Wenn wir jetzt „speichern“, werden wir sehen, dass wir ein Layout haben, das dem ähnelt, das wir am Ende haben möchten. 11. Beispiel 2 – Einstellen der Zeilen und Spaltengrößen: Wenn wir uns das letzte Beispiel ansehen, werden wir feststellen, dass es einige Unterschiede zu dem gibt, was wir derzeit in unserer Arbeitsdatei haben. Ein Unterschied ist die Tatsache, dass diese Spalten, die linke und die rechte, größer sind als das, was wir hier haben. Die Rastervorlagenbereiche können einfach mit jeder anderen CSS-Eigenschaft kombiniert werden . Um diese Breite der Spalten zu korrigieren, kann ich hierher kommen und Rastervorlagenspalten sagen. Ich werde sagen, dass ich für die erste Spalte eine Breite von 200 Pixeln möchte. Für den nächsten möchte ich den gesamten verfügbaren Platz einnehmen. In diesem Fall werde ich sagen, dass ich ein Fr will, und für den letzten möchte ich wieder 200 Pixel haben. Wenn wir sparen, werden wir feststellen, dass die Breite unserer Spalten jetzt genau gleich ist. Ein weiterer Unterschied zum letzten Beispiel ist die Tatsache, dass dieses bis zur vollen Höhe reicht. Man mag versucht sein zu sagen, dass ich, wenn hier Dinge mit Rastervorlagenspalten gelöst wurden, wenn hier Dinge mit Rastervorlagenspalten gelöst wurden, kommen und die Zeilen verwenden kann und Grid-Vorlagen-Zeilen sagen kann. Angesichts der Tatsache, dass wir zwei Reihen haben, die bis zu 50 Prozent gehen müssen, werde ich einfach so etwas sagen, die erste Reihe muss auf einem Fr sein und die zweite Reihe muss wieder auf einem Fr sein. Aber das ändert nichts an unserem Layout. Wenn wir sparen, wird das Ergebnis genau das gleiche sein. Dies liegt daran, dass wir nicht die Tatsache zum Ausdruck gebracht haben, dass dieser Container von 100 Prozent erzählt werden muss. Wir können hierher kommen und sagen, dass die Höhe für unseren Container 100 Prozent der Höhe des Darstellungsfensters beträgt. Wenn wir sparen, werden wir sehen , dass unser Layout jetzt ganz von oben nach unten läuft. Als Randnotiz können wir sogar die Eigenschaft Rastervorlagenzeilen entfernen. Da wir standardmäßig unser Rastersystem untersuchen, werden wir prüfen, dass es zwei Zeilen hat, und standardmäßig wird es jedem von ihnen ein Fr zuweisen. Apropos, wir können all diese Erklärungen sogar entfernen und die Dinge werden genau gleich aussehen. Denn wie das Rasterlayout funktioniert, ist, dass wenn es ein neues Element platzieren muss , sagen wir dieses linke Element, es wird es in den ersten verfügbaren Platz platziert. Danach platziert der nächste den zweiten verfügbaren Speicherplatz und so weiter. Aber im Moment behalten wir alles so, wie es für all diese linken und rechten Brillen ist diese linken und rechten Brillen weil wir sie brauchen, um ein besseres Kortikum zu haben , wenn wir den Reaktions-Teil umsetzen. 12. Beispiel 2 – Zentrieren von Artikeln in CSS Grid und mit flexbox: Die Änderungen, die wir in der vorherigen Lektion vorgenommen haben der vorherigen Lektion das Problem mit den Größen der Zeilen und Spalten behoben. In unserem letzten Beispiel ist der Inhalt jedoch innerhalb einer Zelle zentriert. Sie wissen vielleicht, dass dies mit so etwas wie einem Display-Flex ganz einfach erreicht werden kann . In der Tat kann das CSS-Gitter mit jeder anderen Art von Anzeige kombiniert werden . Zum Beispiel, wenn ich hier in ein div gehe und sage, dass dies einen Display-Flex hat. Danach werde ich sagen, dass der Rechtfertigungs-Inhalt im Mittelpunkt steht und auch Align-Items immer noch im Mittelpunkt steht. Wir sparen. Wir können jetzt sehen, dass unsere Inhalte sowohl horizontal als auch vertikal zentriert sind, und dies wurde mit einer Anzeige von Flex geschehen. Die Moral der Geschichte ist, dass wir CSS-Gitter immer mit jeder anderen Art von Anzeige kombinieren können. 13. Beispiel 2 – Responsive Designs mit CSS Grid: Eine Sache, die ich am CSS-Grid wirklich mag, ist wie viel Kontrolle es uns ermöglicht, wenn wir es mit Responsive Design zu tun haben. Nehmen wir an, unser Layout muss in so etwas geändert werden , wenn der Bildschirm mit 800 Pixel niedrig ist. Nun, dafür brauchen wir natürlich eine Art Medienabfrage. Ich komme hier unter den Container und hier bei der Medienabfrage und sage, dass ich, wenn unser Bildschirm bei 800 Pixel niedrig ist, für den Container einige Änderungen vornehmen möchte. Wenn wir im letzten Beispiel schauen, sehen wir hier, dass sich links und rechts danach in die oberste Reihe bewegt haben, der Hauptinhalt ist die zweite Reihe und in der letzten Reihe haben wir die linke 2 und die rechte 2 . Wenn wir uns diesen Bereich für Gittervorlagen ansehen, beschreibt dies, wie unser Layout aussieht. Das ist schön, denn was ich hier in der Medienabfrage tun kann , ist, dies nur außer Kraft zu setzen. Ich werde also sagen, dass unser Rastervorlagenbereich in etwa so aussehen muss. Anfangs, in der ersten Reihe, wollen wir a und b haben. Danach muss in der zweiten Zeile mit dem x gefüllt werden, und schließlich wird in der letzten Zeile c und d. Wenn wir speichern, werden wir sehen dass einige Änderungen teilgenommen haben, aber trotzdem sieht das Layout nicht so aus, als ob es aussehen soll, und liegt an diesen Vorlagenspalten, die dem Layout sagen , dass wir drei Spalten haben und sie muss auf bestimmten Größen sein. Aber was wir in unserer Medienabfrage leicht tun können, ist, diese Rastervorlagenspalten zu nehmen und zu sagen, dass wir automatisch [unhörbar] wollen. Dadurch wird das Layout genau so angezeigt , wie wir es im letzten Beispiel beabsichtigen. Noch mehr, sagen wir zum Beispiel, wenn wir diesen Hauptinhalt nach oben verschieben wollen, weil ich nicht weiß, dass dies der wichtigste Teil aller Inhalte ist , können wir dies leicht erreichen, indem wir einfach das, geh und steck es hier rein. Wenn ich danach sparen werde, werden wir sehen, dass wir jetzt den Hauptinhalt im Topical unserer Seite gut dargestellt haben . Wie gesagt, das ist eine Sache, die ich am CS-Grid wirklich liebe. Die Tatsache, dass wir, nachdem wir all diese Namen definiert haben, das gesamte Layout leicht ändern können. Wir haben gerade eine Beispielmedienabfrage und die Eigenschaft „Gittervorlagenbereiche“. 14. Beispiel 2 – Lasst eine leere Zellen- und naming: Bevor wir diese Übung abschließen, möchte ich ein paar kleine Details mit benannten Rastervorlagenbereichen durchgehen . Zuallererst können diese Namen Wörter sein, die wir haben wollen. Ich habe hier gerade einfache Buchstaben wie a, b, c usw. verwendet , nur in der Idee, sie einfach zu tippen. Aber wenn ich zum Beispiel diesen zum Testen ändern möchte, werden die Dinge wie zuvor laufen. Die einzige Bedingung ist, dass der Name auch in der entsprechenden Klasse verwendet wird. Wenn man über diese Namen spricht, wird bei den Namen Groß-/Kleinschreibung berücksichtigt. Wenn ich zum Beispiel hier von x zu Capital Case X wechseln werde und sparen werde, werden wir sehen, dass unser Layout jetzt auf den Kopf gestellt ist. Dasselbe passiert, wenn ich x in Anführungszeichen eintippe, wie ich es für Strings in einer Programmiersprache tun werde. Ein häufiges Problem ist die Tatsache, dass wir in unserem Layout manchmal möchten , dass eine Zelle keinen Inhalt enthält. Zum Beispiel möchte ich, dieses Right 1 nur eine leere Zelle ist. Eine sehr gebräuchliche Lösung dafür besteht darin, den Namen b oder wie auch immer der Name für diese Zelle ist, einfach durch einen einfachen Punkt zu ersetzen den Namen b oder wie auch immer . Aber eine andere Sache , die ich damit tun müsste , ist auch den eigentlichen Inhalt zu entfernen, sonst werden Dinge kaputt gehen. Eine Sache weniger ist, dass es Fälle gibt, in denen wir nicht möchten, dass die Höhe des Layouts der Höhe unserer Seite entspricht . Wir wollen nur sagen , dass diese Zellen 150 Pixel groß sind. Was ich hier tun werde, ist, diese Höhe von 100 Ansichtsfenstern zu entfernen . Danach werde ich in einer Zelle kommen und sagen, dass dies die Höhe von 150 Pixeln hat . Wenn wir sparen, können wir jetzt durch die Tatsache verwirrt sein, dass dieser Hauptinhalt nicht auf der Höhe von Rechts 1 und Rechts 2 liegt . Auch wenn wir hier sagen, dass wir x sowohl in der ersten Reihe als auch in der zweiten Reihe haben. Aber was tatsächlich passiert, ist, dass diese Höhe von 100 Pixeln auch auf den Hauptinhalt angewendet wurde . Aber unsere Zelle geht immer noch von einer Reihe zur anderen.