CSS-Grundlagen: Erste Schritte mit CSS Grid

1. Einführung: Ich wurde 1996 Webentwickler. Also bin ich irgendwie mit CSS aufgewachsen. Ich bin Rachel Andrew. Ich bin Webentwickler, Schriftsteller und Sprecher und lebe in Bristol in Großbritannien. CSS Grid ist eine zweidimensionale Layout-Methode. Es kann Dinge gleichzeitig in Zeilen und Spalten auslegen, und das ist das erste Mal, dass wir so etwas in CSS hatten. Als ich das erste Mal die Spezifikation sah, die CSS Grid wurde, wusste ich, dass dies etwas war, das wir brauchten. Meine Erfahrung erzählte mir, dass es, wenn jemand nicht ein bisschen Cheerleader dafür war, verschwinden könnte. Also entschied ich mich, dass ich dieser Cheerleader sein würde und ich würde anfangen zu schreiben und über etwas zu sprechen, das nicht wirklich etwas war, das jemand noch verwenden konnte, in der Hoffnung, dass alle Leute so aufgeregt werden, wie ich es war. In dieser Klasse werde ich Sie durch, wie Sie mit CSS Grid beginnen und Ihnen einige der Hauptmerkmale der Spezifikation durch ein kleines Projekt zeigen . Es ist ein grundlegendes Blocklayout, mit dem ich Ihnen einige der Features des Grids innerhalb einer realistischen Art von Framework zeigen kann. Diese Klasse wird wertvoll für jeden sein, der im Web arbeitet. Ob Sie hauptsächlich Front-End-Entwicklung machen und ich möchte, dass Sie etwas über CSS Grid erfahren oder sogar, wenn Sie hauptsächlich Back-End-Entwicklung machen. Es wird nützlich sein, wenn Sie bereits ein wenig über CSS wissen. Sie wissen, wie man CSS auf eine Seite anwendet und Sie verstehen Dinge wie Selektoren und so weiter. Ich bin wirklich aufgeregt, dass du der Klasse beigetreten bist. Also lasst uns anfangen. 2. Einführung in CSS Grid: Der Hauptweg, um Layout vor CSS Grid zu machen, war wirklich die Verwendung von Floats. Nun, um ein schwebendes Element zu schweben, wird es nach oben bewegen. Ich bin sicher, Sie können eine Sache schweben und dann können Sie eine andere Sache daneben schweben, und Sie können ein System erstellen, das wie ein Raster aussieht. Um das zu tun, müssen Sie alles eine Breite bekommen. Jedes Ihrer Elemente, Sie geben ihm eine Breite und dann schweben Sie sie nebeneinander, und so, was Sie am Ende mit sieht aus wie ein Raster. Es gibt kein richtiges Raster auf der Seite, was Sie haben, gibt nur eine Reihe von Elementen, die alle herumgeschoben werden, um wie ein Raster auszusehen. Als wir davon weitergingen, bekamen wir dann Flex-Bücher, die viele Leute als eine gute Möglichkeit hielten, Gitter im Web zu erstellen, aber es ist auch kein guter Rahmen. Es ermöglicht Ihnen, Raster einfacher zu erstellen als Float's tun, aber Sie geben den Dingen immer noch eine Breite und schieben sie herum. Also, das ist, was wir tun würden, um Layout zu tun, bis wir CSS Grid bekommen. CSS Grid ist eine zweidimensionale Layout-Methode für das Web. Zweidimensional bedeutet, dass wir Dinge in Spalten, aber auch in Zeilen zur gleichen Zeit auslegen können , und es ist das erste Mal, dass wir wirklich so etwas für das Web hatten. CSS Grid ist jetzt in allen modernen Browsern verfügbar. Es hat sehr sehr gute Browserunterstützung. Wenn Sie lernen, ein Webentwickler zu sein, oder sogar wenn Sie heute gerade ein neues Projekt starten, gibt es wirklich viele Gründe, Grid nicht zu verwenden. Also, das ist eine Sache zu betrachten, um zu verstehen, wie man benutzt, weil es sehr viel ist, wie die Dinge in der Zukunft gemacht werden. Also diese Umgebung ist CodePen, es ist eine Code-Sharing-Site, Sie können es für ein kostenloses Konto signieren. Das Schöne an CodePen ist, wenn Sie etwas finden von dem Sie das Aussehen mögen und mit dem Sie experimentieren möchten, können Sie Ihre eigene Kopiercodegabel erstellen, und das ermöglicht es Ihnen, zu spielen und zu bearbeiten und zu tun Dinge, die Sie als Ausgangspunkt für Ihre eigene Arbeit verwenden können. Die Art und Weise, wie wir arbeiten, ist, dass ich einen Ausgangspunkt geschaffen habe. Um zu diesem Beispiel zu gelangen, verwenden Sie einfach den Link am unteren Rand des Bildschirms und Sie werden diese URL auch in der Kreuzbeschreibung finden. Das ist also die Seite, an der wir arbeiten werden, aber ich habe das gesamte Layout entfernt. Also haben wir hier einige CSS, aber wir haben nicht das CSS, das Layout erstellt. Wenn wir nun nach unten scrollen, können Sie sehen, dass wir alle Bilder und den gesamten Inhalt haben. Dies ist im Blocklayout angelegt, was bedeutet, dass Dinge, die auslegen, nicht das andere blasen, was die Standardmethode ist, wie die Dinge in CSS angelegt werden, wenn Sie kein Layout erstellen. Also, während wir in CodePen sind, können wir uns ein wenig umsehen, wie CodePen funktioniert. Nun, wenn Sie zum Beispiel zum ersten Mal gehen, werden Sie so etwas sehen, und wenn Sie oben auf die Schaltfläche Gabel klicken , wird Ihre eigene Kopie erstellt. Nun können Sie an dieser Kopie arbeiten, die Sie in Ihrem CodePen-Konto gespeichert haben, sodass Sie später darauf zurückkommen können. Dies bedeutet, dass Sie Änderungen vornehmen und alle Lektionen verfolgen können , ohne den eigentlichen Standardstartpunkt zu ändern. Wenn die Dinge alles durcheinander sind und Sie es erneut versuchen möchten oder Sie etwas völlig anderes mit dem Beispiel ausprobieren möchten, können Sie einfach einen anderen Fork erstellen und von vorne anfangen. Aber schauen Sie sich die verschiedenen Panels hier an der Spitze an. Dies ist der HTML-Code des Dokuments. So können Sie den gesamten HTML-Code sehen, der verwendet wird, um den Inhalt zu markieren. Hier ist der Pfosten unten und da ist die Seitenleiste. Dann unten hier, wir haben das CSS. Hier werden wir die meiste Zeit in dieser Lektion verbringen. Wir werden das CSS durchlaufen und den Selektoren, die wir bereits hier haben, Dinge hinzufügen und Änderungen daran vornehmen. Wenn Sie anfangen, den Code des ursprünglichen Beispiels zu bearbeiten, erstellt CodePen im Wesentlichen eine Fork für Sie, da Sie den Code des Beispiels einer anderen Person nicht ohne deren Mitspracherecht ändern können. Also, Sie müssen sich keine Sorgen darüber machen, jemals jemand anderes Code auf CodePen durcheinander zu bringen. Sie werden immer Ihre eigene Version des Dokuments erstellen. Aber es könnte ziemlich praktisch sein, wenn Sie einfach Leute Ihrer eigenen Sachen erstellen, denn dann können Sie mehrere Kopien haben, während Sie Dinge durcharbeiten und dann auf die alte Version zurückrollen , wenn Sie möchten, wenn Sie ein Problem haben. CodePen versucht, Ihre Arbeit automatisch zu speichern. In der Tat sehen Sie manchmal, während Sie arbeiten, eine kleine Nachricht an der Spitze, die besagt , dass es sich um automatische Speicherung oder um zu bitten, dass ich speichere. Wenn Sie sicherstellen möchten, dass Sie den Punkt gespeichert haben, an dem Sie sich befinden, können Sie immer oben auf die Schaltfläche Speichern klicken. Dadurch wird sichergestellt, dass die von Ihnen geleistete Arbeit gespeichert wurde. Wenn Sie zum ersten Mal zu CodePen kommen, ist das JavaScript-Panel hier geöffnet. Wir werden heute kein JavaScript schreiben, Sie könnten das immer aus dem Weg bekommen, indem Sie es minimieren und es wird verschwinden. Wenn Sie wirklich an CSS arbeiten, wenn Sie etwas mehr Platz machen möchten, könnten Sie sogar das HTML-Panel minimieren, wenn Sie möchten, und nehmen Sie das einfach aus dem Weg, wenn Sie einen kleinen Bildschirm zu arbeiten an, um den Platz zu maximieren, den Sie haben, um zu arbeiten. Natürlich können Sie diese Panels offensichtlich herumziehen, um ein bisschen mehr Platz für sich selbst zu schaffen. Ich werde in CodePen in den Präsentationsmodus wechseln, weil ich Ihnen den Text und das CSS ein wenig größer zeigen kann, was Ihnen leichter zu sagen ist. Ansonsten funktioniert alles auf die gleiche Weise. Also, bevor wir anfangen, tatsächlich über das CSS zu lernen, werde ich Ihnen nur ein wenig über unsere Dokumente zeigen und wie die Dinge funktionieren. Also, oben hier, haben wir den HTML-Code des Dokuments. Die Funktionsweise des CodePen besteht nun darin, dass Sie die Text-Tags nicht einschließen, und hier sind die Teile eines HTML-Dokuments, mit denen Sie vielleicht vertraut sind. Also fangen wir eigentlich nur mit dem an, was sich im Textkörper des Dokuments befindet. Also, wir haben hier unseren Header, der unsere Navigation enthält. Sie können die Navigation hier sehen. So haben wir zum Beispiel Artikel, und hier sind Artikel im HTML. Dann haben wir den Titel, der ein H1 ist, das ist Blog-Post, und hier starten wir das Hauptdokument. Also, wir haben ein Bild von Klasse Wrapper, und das hat weniger die Klasse der vorgestellten bemerkt, und das ist unsere Funktion Dyson. Also, hier sind sie. Diese werden die Art von Blog-Posts mit einem Bild und einem Link zum Durchklicken sein. Also, dass hier, das tatsächlich als Liste markiert, weil was diese UL ist, das ist ungeordnete Liste, und dann haben wir Listenelemente, saisonale Artikel. Sie können sehen, dass wir Bilder mit dem Bild-Tag img drin haben. So können Sie weiter durch diese suchen und nach unten scrollen, und hier haben wir unseren Artikel mit einer Klasse von Post, und das ist der Artikel, der hier unten ist. Das ist also der Hauptinhalt unseres Designs. Das untere Panel hier ist unser CSS. So können Sie unsere CSS-Selektoren wie HTML sehen. Hier setzen wir eine Schriftart für alle CSS wird die gleiche Schriftart haben, Open Sans. Wir arbeiten nach unten, wir haben viele Dinge im Menü. Wir haben Dinge wie Hintergrundfarben und so weiter, Dinge, die Teil des Layouts sind, aber ein wenig Stil zu diesen Dokumenten hinzufügen , so dass wir nicht unbedingt alles in diesen Lektionen schreiben müssen. Das ist also unser CSS und hauptsächlich werden wir in diesem Panel arbeiten, Änderungen vornehmen oder neue Selektoren und neue Regeln für unsere Selektoren hinzufügen. Der Grund, warum ich einen Blogbeitrag gewählt habe, ist, dass ich dachte, dies ist eine gute Sache, dass viele Leute eine persönliche Website haben und wenn Sie nur lernen, wie man sich für das Web entwickelt, eine persönliche Website wie diese zu erstellen, ist es ein wirklich gute Möglichkeit, um tatsächlich zu spielen und neue Fähigkeiten zu lernen. In der Tat ist es oft, wo ich mit etwas Neuem beginne. Ich beginne auf meiner persönlichen Website, ich werde mit etwas Neuem herumspielen und sehen, wie es funktioniert, bevor ich es vielleicht auf einer Produktionsstätte für einen Kunden verwenden könnte. Sie können sich frei fühlen, dies zu nehmen und es zu verwenden, indem Sie einfach die Bilder ersetzen und ein paar Änderungen vornehmen, wenn Sie auf Ihrer eigenen Website verwenden möchten, oder verwenden Sie einfach kleine Teile davon als Sprungpunkt für Dinge, die Sie in Ihre eigene Entwürfe. Also zurück in Ihrer Ansicht auf CodePen, wenn Sie die Arbeit, die Sie getan haben, nehmen und sie dann tatsächlich auf Ihre Website anwenden möchten, gibt es hier einen kleinen Exportlink, und so können Sie das so exportieren, und das wird laden Sie das gesamte HTML und CSS herunter, so dass es irgendwo auf einen Server hochgeladen werden könnte. Ich benutze oft CodePen als eine Möglichkeit, kleine Experimente zu machen, die ich dann machen werde, ich benutze wahrscheinlich woanders. So können Sie das immer tun, Sie können immer einen Zip von der Arbeit, die Sie getan haben. Nun, da Sie ein wenig über CodePen und die Umgebung wissen , in der wir arbeiten werden, gehen wir zur nächsten Lektion über, in der ich Ihnen zeigen werde, wie Sie Ihr Grid definieren. 3. Definieren deines Rasters: Wenn wir eines dieser Beispiele starten, wird es eine ul auf dem Bildschirm geben, was der Punkt ist, an dem die Demo jetzt so ist, wo ich bin. In diesem Beispiel beginnen wir gleich am Anfang mit dem Code, den ich Ihnen in der letzten Lektion gezeigt habe. Nun, wenn Sie möchten, können Sie einfach diesen Code verwenden und alle Lektionen mit diesem Dokument direkt durcharbeiten , oder wenn Sie möchten, können Sie mit einem neuen Beispiel abholen, das mein Ausgangspunkt für jedes Dokument ist, und wir werden zeigen Ihnen, dass ul auf dem Bildschirm mit jeder Lektion. In dieser Lektion zeige ich Ihnen, wie Sie ein Raster definieren. Um GridLayout zu verwenden, müssen wir dem Browser mitteilen, dass wir CSS-Raster verwenden möchten. Ich zeige Ihnen, wie Sie ein Raster definieren und Spalten und Zeilen verwenden , um das Raster einzurichten, mit dem Sie auf der Seite arbeiten. Also, wir werden beginnen, ein Gitter auf dieser Seite zu erstellen. Wir haben zwei verschiedene Raster auf der Seite. Es wird das Raster geben, das die vorgestellten Elemente am oberen Rand der Seite enthält, und dann wird es ein zweites Raster geben, um mit dem Layout unseres Artikels unten umzugehen . Also, lasst uns anfangen. Also, das erste, was ich tun möchte, ist mit diesen vorgestellten Elementen zu arbeiten. Also, wenn wir im CSS nach unten scrollen, wirst du finden.featured. Nun, das ist die Klasse, die die ul hier geliefert hat, wir haben ul Klasse vorgestellt, das wird auf diese vorgestellten Elemente zielen. Jetzt, im Moment, was ich getan habe, ist, dass ich das Standard-Styling entfernt habe , das Sie auf einer Liste erhalten. Ich habe die Kugel und den Rand und die Polsterung entfernt. Ich habe auch eine Hintergrundfarbe hinzugefügt, und wir werden sehen, warum, wenn wir anfangen, unser Raster zu erstellen. Also, um Raster zu verwenden, sagen wir einfach dem Browser, dass wir Raster verwenden möchten, und wir tun das mit Display-Grid. Das bedeutet, dass wir jetzt GridLayout verwenden, obwohl sich im Layout nichts geändert haben wird, denn was wir jetzt tatsächlich erstellt haben, ist, dass wir ein einzelnes Spaltenraster erstellt haben, und das hat das Layout nicht wirklich geändert. Also, um das Layout zu ändern, wenn Sie beginnen, einige Zeilen oder Spalten hinzuzufügen. Wenn Sie das automatische Speichern Popup auf CodePen sehen, bedeutet das, dass CodePen begonnen hat, Ihr Dokument während der Arbeit für Sie zu speichern. Sie können immer oben auf Speichern klicken, wenn Sie sicherstellen möchten, dass Ihre Arbeit gespeichert ist. Also, wir jetzt werden wir einige Spalten auf dem Gitter erstellen. Nun tun wir das mit einer Eigenschaft namens grid-template-columns. Der Wert, den grid-template-columns annimmt, wird als Spurliste bezeichnet. Das ist also eine Auflistung der Streckengrößen. Jetzt werde ich damit aufhören, dies in Pixeln zu tun, weil ich Ihnen den Unterschied zwischen den verschiedenen Arten der Dimensionierung unserer Spalten zeigen möchte . Also, lassen Sie uns einige Spuren erstellen, und wir werden sie mit 300 Pixeln erstellen. Wie Sie jetzt sehen, hat der CodePen unser Layout aktualisiert. Dies ist die nette, denken Sie darüber nach, CodePen zu verwenden. Wir müssen den Browser nicht neu laden, um Änderungen zu speichern, es tut es für uns. Sie können sehen, dass wir etwas haben, das ein bisschen wie ein Gitter aussieht. Was wir haben, sind vier Spuren, die jeweils 300 Pixel verschieben, und wir werden anfangen, unsere Inhalte in diese Tracks zu legen, und nachdem wir vier Elemente haben, hier in einer Zeile angezeigt, die nur eine zweite Zeile erstellt und setzen diesen Artikel am unteren Rand. Mit nur zwei Zeilen CSS können wir etwas erstellen, das wie ein Raster aussieht. Etwas anderes, was Sie hier tun möchten, ist eine Lücke hinzuzufügen. Ich habe diese Hintergrundfarbe auf dem Gebiet, weil das bedeutet, dass ich das durchscheinen lassen kann, indem ich eine Lücke habe. Also, wenn ich sage, Grid-PAP, in diesem Fall werde ich nur eine Lücke mit einem Pixel machen. Es sieht so aus, als hätten wir eine Linie zwischen unseren Artikeln. Sie können hier jedoch eine beliebige Längeneinheit verwenden. Wenn Sie eine große Lücke wollten, könnten Sie sagen, verwenden Sie 10 Pixel, und das Leerzeichen der Elemente. Also, das ist die große Lückeneigenschaft. Lassen Sie uns in diesem Fall auf ein Pixel setzen. Es sieht so aus, als würden wir die Grenze zwischen den Gegenständen abschneiden. Da CodePen automatisch das Layout für uns aktualisiert, können Sie tatsächlich sehen, wie Raster Spaltenspuren erstellt, im Wesentlichen während der Eingabe. Also, für unsere Zwecke wollen wir diese vier Tracks haben. Aber du könntest natürlich so viele Tracks haben, wie du wolltest. Während wir gehen, wird CodePen das nur aktualisieren und das Layout ändern, während Sie weitergehen. Sie haben also ein Raster auf Ihrer Seite, aber Sie können das Raster tatsächlich sehen, es gibt keine Möglichkeit in GridLayout, sich alle Ränder des Rasters anzuzeigen. Allerdings arbeite ich hier in Firefox, und wenn Sie GridLayout verwenden möchten, würde ich wirklich empfehlen, eine Kopie des Firefox-Web-Browsers herunterzuladen, weil Firefox ausgezeichnete Entwickler-Tools hat , die es viel machen einfacher für Sie, mit Gitter zu arbeiten. Natürlich können Sie mit CSS-Grid arbeiten und Firefox nicht verwenden. Chrome hat einige einfachere Entwickler-Tools für GridLayout, aber ich finde es wirklich nützlich, mit den Firefox-Tools zu arbeiten, wenn ich Grid verwende. Sie werden feststellen, dass sich verschiedene Browser auf verschiedene Dinge für ihre Entwickler-Tools konzentriert haben . Also, Chrome ist wirklich großartig, um die Leistung Ihrer Seiten zu überprüfen, und die haben eine Menge von Performance-Tools gebaut. Firefox konzentriert sich auf Layout und Tools für Designer. Also, mehrere Browser zu haben, ist nicht nur hilfreich für Browser-Tests, es kann tatsächlich hilfreich für die Entwicklung sein. Wir werden diese Entwicklertools während des Kurses öffnen, da es eine sehr nützliche Möglichkeit für Sie ist, zu sehen, was im Browser passiert, während Sie mit GridLayout arbeiten. Also, wir können uns die ansehen. Ich habe mit der rechten Maustaste auf einen Bereich meines Rasters geklickt und ich werde sagen, Element inspizieren. Dadurch öffnet sich dieses Panel am unteren Rand des Browsers. Nun, das ist das Firefox-Entwickler-Tools-Panel, und Sie können hier den HTML-Code des Dokuments sehen, und auf der anderen Seite haben wir CSS. Also, wenn wir zum Layout gehen, dann gehen wir zum Rasterbereich hier, und das ist die ul.featured, also ist das unser vorgestellter Bereich. Wenn ich darauf klicke, zeigt Firefox die Rasterlinien für uns an. Also, das ist wirklich nützlich, weil wiralle verschiedenen Teile unseres Rasters sehenkönnen alle verschiedenen Teile unseres Rasters sehen und wir eine kleine Darstellung Ihres Rasters bekommen haben, trotzdem können Sie mit dem Mauszeiger über einen beliebigen Teil des Rasters bewegen. Also, es lohnt sich, an dieser Stelle einige der Terminologie zu durchlaufen , die wir in GridLayout haben. Jeder dieser Bereiche ist eine Grid-Zelle, und Sie können sich vorstellen, dass ein bisschen wie eine Tabellenzelle wirklich ist. Es ist der kleinste Bereich, den Sie im Raster zwischen den Linien haben können. Dann haben wir Rasterlinien und Linien sind nummeriert. Wir können tatsächlich in Firefox die Zeilennummern einschalten. So können Sie hier sehen, wie unsere Linien bekannt sind. Wir haben vier Spuren in unserem Startfeld, und so beginnen wir mit Linie 1 auf der linken Seite, und wir bewegen uns über, also Linie 5, ist die Endlinie. Die Spuren sind ein beliebiger Bereich im Raster oder eine Reihe von Spalten. Eine einzelne Zeile oder eine einzelne Spalte wird als Spur bezeichnet. Also, wir haben hier eine Spaltenspur zwischen den Linien 1 und 2, und dann haben wir hier eine Reihenspur, zwischen diesen Linien 1 und 2. Wenn ich also über Tracks rede, rede ich darüber. Ich spreche von einer einzelnen Spalte oder Zeile im Raster zwischen zwei Zeilen. Lassen Sie uns also fortfahren, um das andere Raster auf unserer Seite zu erstellen. Ich werde diese Werkzeuge vorerst schließen. Also, das andere Raster wird sich mit dem Layout unseres Artikels beschäftigen. Wenn wir durch den HTML-Code nach unten scrollen, können wir sehen, dass der Artikel in einer Klasse von Inhalten bleibt. Also, das ist, was wir CSS-Regeln hinzufügen werden. Jetzt habe ich keinen Inhalt im CSS-Tool. So können wir das zu einem anderen selektieren.content hinzufügen. Also werden wir ein Raster erstellen und einfach ein Layout dafür machen. Also zuerst werde ich es ein wenig mit einem oberen Rand runterdrücken. Also, ich füge nur eine Margin-top für 40 Pixel hinzu, die das ein wenig nach unten bewegen würde. Dann werden wir wieder ein Gitter erstellen. Ich werde wieder einen Rasterpap erstellen. Diesmal werde ich Prozentsätze verwenden. Lassen Sie uns also eine Rasterlücke von fünf Prozent erzeugen. Um dann tatsächlich zu sehen, dass irgendetwas in unserem Raster passiert müssen wir wieder Grid-Template-Spalten verwenden, und wir werden Prozentsätze verwenden. Also werde ich eine größere Spaltenspur von 70 Prozent und dann eine kleinere Spaltenspur von 25 Prozent erstellen . Dadurch wird unsere Sidebar neben unseren Inhalten angezeigt. Das ist so weit, wie wir damit in dieser Lektion kommen werden. Wir werden in der nächsten Lektion einen Blick darauf werfen, wie wir dieses Layout verbessern können, indem wir einige Dinge verwenden, die Teil des Rasters sind. Bevor wir von diesem Beispiel weitergehen, werde ich nur ein paar Dinge darüber erklären, wie sich die Dinge an dieser Stelle anlegen. Im Moment haben wir also Raster, die diese äußeren Einschränkungen dieser Layouts definieren, aber wir haben noch nicht begonnen, das zu ändern, was innerhalb der Rasterzellen selbst passiert. Also, die Bilder, die wir hier haben, sind eine Reihe von Ballonfotos, ich gemacht habe, „Ich komme aus Bristol, und wir haben jedes Jahr eine große Ballonfiesta, die mir eine große Bibliothek von Ballonfotos gibt. Aber Sie können natürlich Ihre eigenen Bilder tauschen, Sie können Assets in CodePen hochladen, oder Sie können auf jedes Bild im Web verlinken , das Sie verwenden möchten, um diese zu ersetzen. Das ist nur ein Link zu einem Bild hier. Wenn Sie Assets in CodePen hochladen möchten, werde ich einfach zu dieser Ansicht springen, die eher der Ansicht ähnelt, die Sie sehen. Wenn Sie auf Assets klicken, erhalten Sie ein Asset-Panel, das verschiedene Design-Assets enthält, die tatsächlich in CodePen vorhanden sind, die Sie verwenden können. Sie können auch Ihre eigenen hochladen, Sie können Dateien per Drag & Drop ablegen, und dann haben Sie eine Reihe von Dateien, die Sie hinzugefügt haben, wählen können , was es einfacher macht. Wenn Sie eine Reihe von Dingen haben, die Sie in Beispielen verwenden möchten, können Sie sie einfach greifen und speichern Sie sie hier. Aber Sie können auch die Dinge verwenden, die CodePen bereitgestellt haben. Es ist jetzt das Ende der Grundlagen der Definition eines Rasters. Wir können mit der nächsten Lektion fortfahren, wo wir wirklich anfangen können, dieses Layout zu verfeinern, indem wir die Spurgröße verstehen. 4. Definieren deiner Track-Größe: Sie können diese Lektion mit dem Beispiel beginnen, an dem Sie in der letzten Lektion gearbeitet haben , wenn Sie diese bis zur anderen verfolgen, oder Sie können die URL auf dem Bildschirm verwenden, um genau dort zu finden, wo ich jetzt bin. In der letzten Lektion haben wir ein Raster mit vertrauten Längeneinheiten erstellt, also Pixeln und Prozentsätzen. In dieser Lektion werden wir das Raster verfeinern und eine Methode zur Dimensionierung von Spuren verwenden , die für Rasterlayout erstellt wurde, die tatsächlich die Dinge viel einfacher macht. Also, wenn Sie sich unser Layout ansehen, das wir jetzt erstellt haben, weil wir diese vier Spuren haben, die 300 Pixel sind, haben wir irgendwie diese Lücke am Ende. Nun, wenn wir möchten, dass Sie ein Layout erstellen, das reflektiert werden sollte, ist die Art und Weise, wie wir das im vollen Raster tun würden , Sie neigen dazu, Prozentsätze zu verwenden, wenn Sie hier unten verwenden. Sie können also sehen, dass, weil wir Prozentsätze verwendet haben, diese Spuren wachsen und schrumpfen. Das Problem mit Prozentsätzen ist, dass Sie sie für sich selbst ausarbeiten müssen. Sie müssen herausfinden, wie viele Prozent Spur Bedürfnisse und dann irgendwie bis sie und dann stellen Sie sicher, dass Sie nicht mehr als 100 Prozent bekommen. Wenn Sie mehr als 100 Prozent erhalten, erhalten Sie wahrscheinlich eine Bildlaufleiste. GridLayout hat also eine neue Spur-Dimensionierung eingeführt. Das benutzt etwas, das die FR-Einheit nennt, und das werden wir uns ansehen. Die FR-Einheit ist eine Flex-Einheit, sie definiert eine flexible Länge und befasst sich mit der Verteilung von Raum im Gittercontainer. In den meisten Fällen, wenn Sie GridLayout verwenden und denken, dass Sie Prozentsätze verwenden möchten, dann liefert die FR-Einheit Ihnen konsistentere Ergebnisse und erspart Ihnen, alles zu berechnen. Wenn Sie zum Beispiel eine zusätzliche Spur hinzufügen möchten, ist das mit der FR-Einheit ganz einfach. Mit Prozentsätzen müssen Sie alles neu berechnen. In den meisten Fällen würde ich mich dafür entscheiden, die FR-Einheit zu verwenden. Das einzige Mal, wo ich empfehlen würde, Prozentsätze zu verwenden, ist, wo Sie GridLayout neben anderen Layoutmethoden verwenden, die Prozentsätze verwenden müssen. Zum Beispiel haben Sie ein schwebendes Bootstrap-Layout und möchten eine GridLayout-Komponente in die Mitte einfügen, können Sie dann wählen, Prozentsätze zu verwenden, um dem Rest Ihres Layouts zu entsprechen. Aber die meiste, den Rest der Zeit, würde ich für die FR-Einheit gehen. Es wird Ihnen viel Zeit sparen. Es war wirklich schwer in früheren Layoutmethoden, Dinge mit fester Größe und flexiblen Dingen zu mischen , wenn wir Prozentsätze verwendet haben, und das ist etwas, was die FR-Einheit wirklich gut für uns tut. Zum Beispiel haben Sie vielleicht ein kleines Symbol, das Sie immer 50 Pixel breit sein wollen, na ja, das ist in Ordnung, weil Sie den Rest des Inhalts zu einem FR machen können und es den gesamten verfügbaren Platz absorbiert , so dass die fixe Größe Sache fixiert bleibt , ohne dann eine Bildlaufleiste zu verursachen. Also, wenn wir zuerst einen Blick auf unsere vorgestellten Artikel hier. Wenn wir diese im CSS finden und hier ist unsere Spurgröße von 300 Pixeln. Jetzt werde ich diese Spuren ändern, um diese neue Einheit zu benutzen, die FR-Einheit, und ich werde vier FR-Spuren erstellen. Sie können sehen, dass das Layout beginnt sich zu ändern, so dass sollte das Browserfenster füllen. Der Grund dafür ist, dass die FR-Einheit den verfügbaren Platz verteilt. Also, Grid hat den gesamten verfügbaren Platz in unserem Grid-Container genommen, direkt über die Seite erstreckt. Weil wir vier Tracks haben, alle von einem FR, es hat jedem der Tracks einen Teil gegeben. Wenn Sie Ihr Browserfenster dehnen und verkleinern, können Sie sehen, wie das schön und reaktionsschnell ist, es wächst und schrumpft je nach verfügbarem Speicherplatz, den wir haben. Wenn die Titelgröße in Pixeln ist, sind sie im Wesentlichen fixiert. Also, wenn wir es mit zu wenig Platz beenden, nun, es wird nur überlaufen. Wie Sie sehen können, erstellt das eine Bildlaufleiste und es stößt auch aus dem Layout heraus, was passieren würde, wenn Sie feste Spuren haben. Nur diese Art von Situation, die die FR-Einheit löst, sie erlauben uns nur, die verfügbaren Räume zu teilen, sei es eine große Menge an Raum oder eine kleine Menge Raum. Also, das ist der obere Teil des Layouts, jetzt verbraucht es einen großen Teil des verfügbaren Platzes und die Spuren sind schön und flexibel. Werfen wir einen Blick auf unseren Prozentbereich, also ist dies der Inhalt hier unten , für den wir Prozentsätze verwendet haben. Nun, Sie könnten das ändern, um auch FR-Einheiten zu verwenden. Also, ich werde das in drei FR ändern, einen FR. Nun, was das tut, ist es, dass nehmen Sie den ganzen Platz in den Container und geben drei Teile des Raumes auf die erste Spur, die unsere Spur, die größer ist, und ein Teil auf die zweite Spur. Also, Sie können damit spielen, wenn Sie zwei Teile für den ersten Track und einen Teil für den zweiten Track hatten . Was hier passiert ist, ist der ganze Raum wird in drei geteilt und zwei Teile gibt uns die erste Spur, und ein Teil, die zweite Spur. Also, ich denke, drei FR, eine FR gibt mir die Art von Layout, die ich will. Also, die Antwort ist wissenswert, hier haben wir eine große Lücke von fünf Prozent, Sie könnten das verlassen oder Sie könnten sich entscheiden, eine feste Größenlücke zu haben. Was hier passiert, ist, dass das Raster auf diese Lücke schaut, und es steht: „Nun, all unser Platz ist verfügbar, wir müssen 40 Pixel wegnehmen, weil das notwendig ist, um die Lücke zu füllen.“ Dann wird alles, was übrig ist, nach diesen FR-Einheiten verteilt. Sie können tatsächlich Spuren mit fester Größe und FR-Spuren mischen. Wenn wir also immer wollten, dass unsere Sidebar 300 Pixel hat, könnten wir eine FR-Spur und eine 300-Pixel-Track haben. Da wir dann weniger Platz haben, können Sie sehen, dass 300 Pixel Spur immer innerhalb der Pixel bleibt, und es ist der Rest des Raumes, der der anderen Spur gegeben wird. Also, diese FR-Einheiten sind wirklich nützlich und helfen uns, Layouts zu erstellen , die wachsen und schrumpfen mit dem Raum, den Sie zur Verfügung haben , ohne dass Sie die Mathematik tun müssen. Also, was war der Fall, als Sie mit Prozentsätzen gearbeitet haben. Die FR-Einheit ist absolut unerlässlich, um die Vorteile von CSS Grid zu nutzen. Wir hatten keine Notwendigkeit, dies in früheren Layoutmethoden zu sagen , weil es wirklich nicht funktioniert hätte. Wir hatten nicht den Platz zum Verteilen. Also, jetzt haben wir das für Gitter, verwenden Sie es und nutzen Sie die Macht, die es Ihnen gibt. Jetzt wissen Sie von der FR-Einheit. der nächsten Lektion werden wir also anfangen, Elemente im Raster zu platzieren und ein Raster in einem anderen zu verschachteln. 5. Verschachteln von Rastern und Platzieren von Elementen: Wenn Sie folgen, können Sie mit dem Beispiel fortfahren, an dem Sie gearbeitet haben, oder Sie können die URL auf dem Bildschirm verwenden, um ein Beispiel zu finden, wo genau ich jetzt bin. In der letzten Lektion haben Sie etwas über die Streckengröße erfahren, und wir haben damit begonnen, unser Raster flexibel zu gestalten. In dieser Lektion werden wir sehr beginnen, das Layout zu verfeinern und einige der internen Teile des Layouts durch Verschachteln von Rastern und Positionieren von Elementen zu bearbeiten . Also, wir werden jetzt einen Blick auf die Interna dieser Kisten werfen. Wir haben ein Raster auf dem [unhörbaren] Gebiet erstellt, und das Raster legt die Elemente darin aus. Aber es sieht noch nicht so aus, als ob wir es wollen. Wir möchten, dass diese Beschriftung das Bild überlagert, und wir wollen auch die Bilder bekommen, so dass sie alle aufstellen und alle ungefähr die gleiche Größe aussehen. Daran werden wir hier arbeiten. Also, was wir tun werden, ist, dass wir tatsächlich ein Gitter innerhalb eines anderen ins Nest gehen. Das ist etwas, was absolut in Ordnung ist. Sie können so viele Raster ineinander verschachtelt haben, wie Sie möchten. Lassen Sie uns nun komplexere Layouts erstellen. Also, unser Haupt-Raster ist auf vorgestellt, und so wird unser nächstes Raster auf dem Li sein, das innen vorgestellt wird. Also, genau wie zuvor, werden wir Display-Gitter verwenden. Dann werden wir dieses Mal beginnen, einige Zeilenspuren im Raster zu erstellen . Wir tun das mit Rastervorlagenzeilen, die genau wie Rastervorlagenspalten sind. Ich werde zwei Zeilen erstellen. Also, wir haben eine Reihe, die eine fr ist, und dann haben wir eine Reihe, die 5em ist. Sie können sehen, dass etwas ohne Raster passiert , das Panel kodiert, beginnt die Größe der Spuren zu ändern. Wenn Sie vorher nicht auf die em-Einheit gestoßen sind, ist dies nur eine andere Längeneinheit in CSS. Es entspricht der Größe des Textes, was sehr nützlich ist. Weil es bedeutet, wenn wir unseren Text größer machen, wird die eigentliche Spur an Größe zunehmen. Es ist eine ziemlich nützliche Dimensionierung, und wir werden herumspielen. Wie Sie sehen können, sieht dieser Track hier ein wenig kurz und abgeschnitten aus, aber wir werden mit der Art und Weise spielen, wie wir diese Dimensionierung erstellen , während wir dieses Layout erstellen. Also, wir haben jetzt ein zweireihiges Spurraster innerhalb jeder dieser Elemente Größe. Lassen Sie uns also einen Blick in das gute Inspect-Element werfen, denn das ist ein guter Weg, um zu sehen, wie das funktioniert. So, Sie können sehen, dass unser Haupt-Raster ist, das ist das auf vorgestellten. Aber Sie haben auch diese einzelnen Raster in den Elementen. Also, wir können eine von denen einschalten, und Sie können auf diesem Gegenstand sehen, wir haben das zweigleisige Raster. Hier ist eine Spur, und hier ist die zweite Reihe Spur. Also, das ist, was wir mit dem arbeiten, was Sie werden, um die Elemente mit diesen Rasterlinien zu positionieren. Also, mit dem Bild zu arbeiten, das hier ist. Wir haben ein div für die Klasse des Bildes. Was wir tun wollen, ist, dass über die beiden Reihen zu dehnen. Also werden wir Grid-Zeile verwenden, und so beginnen wir bei Zeilenlinie eins, und wir enden bei Zeile drei, und das wird in eine Rasterspalte gehen. Also, ich möchte ein bisschen schnell darüber reden. Also, Rasterzeile ist eine Abkürzung für Rasterzeilenbeginn und Rasterzeilenende. Also, eins ist Zeile eins. Wir beginnen bei Zeile eins und enden bei Zeile drei. Wenn wir Firefox hier zurück setzen und das tun, beginnen wir bei Zeile eins, und wir enden an Zeile drei. Also, was Raster getan hat, weil wir diese Beschriftung nicht positioniert haben, sie tatsächlich geschoben hat, hat eine neue Zeilenspur im Raster erstellt, und es wird diese Beschriftung dort unten gedrückt, was standardmäßig passieren wird. Grid überlappt die Dinge nicht, es sei denn, Sie bitten es darum. Es wird immer eine neue Spur erstellen und das Element in diesen Rest setzen. Sie müssen eigentlich Gitter bitten, überhaupt Überlappungen zu machen, damit Sie nicht mit gestapelten Dingen enden. Das ist so ziemlich der Weg mit CSS. Wir versuchen, Ihre Inhalte nicht zu stapeln oder Dinge hinter anderen Dingen zu verstecken, es sei denn, Sie haben darum gebeten. Jetzt müssen wir nur Startzeile 1 für Spalten sagen, weil wir nur eine Spur überspannen wollen, und das ist die Standardeinstellung. Denken Sie vorgabemäßig eine Spur. Wenn wir also sagen, beginnen bei Spaltenzeile eins, beginnt es bei Spaltenzeile eins, und es endet an Spaltenzeile zwei, so dass wir nicht wirklich die explizite Endlinie setzen. Wir möchten auch, dass das Bild den gesamten Bereich abdeckt anstatt diesen weißen Raum darunter zu haben. Jetzt werden wir verwenden, nicht Teil des Gitters, das ist ein anderer Teil von CSS, aber es gibt eine Möglichkeit, ein Bild zu dehnen und einen ganzen Bereich abzudecken. Das verwendet eine Eigenschaft namens Objektanpassung. Also, wenn wir das eigentliche Bild selbst anvisieren und ich sage Objekt passen, decken und es auf die Breite und Höhe von 100 Prozent setzen, können Sie jetzt sehen, dass unser Bild nach oben skaliert wird und in die Form der Box geht, und es wird dann im Grunde selbst beschneiden. Denn sonst würden Sie am Ende mit dem Bild ausgestreckt am Platz, ist nicht das, was Sie wollen. Nun, wir stylen das weiter. Sie werden sehen, wie das funktioniert. Also, wir haben das auf objektgerechte Abdeckung gesetzt. Also, jetzt können wir uns mit der Beschriftung beschäftigen, die wir nach oben ziehen wollten und unser Bild überlagern wollten. Also, wenn wir zu unserer Beschriftung gehen, und ich werde das in Gitterreihe zwei setzen. Sie sehen, dass das Raster jetzt in eine andere Spaltenspur eingefügt werden muss, da es es nicht überlagern möchte. Also, wenn Sie es überlagern möchten, müssen wir auch die Spalte auf eins setzen. Jetzt haben wir unsere Beschriftung auf dem Bild gelegt, und ich habe diese RGBA-Farben hier verwendet, und RGBA bedeutet, dass wir den Alpha-Kanal aller Hintergründe einstellen können. Ich habe auf 0,6 gesetzt, was es halb transparent macht, erlaubt die Bilder dort durchscheinen. Ich werde eine letzte Sache tun, um das aufzuräumen und uns Bilder und schöne Art feste eng zu geben , die helfen, sie im Verhältnis zueinander zu halten. Also, wenn wir zurück zu unserem ursprünglichen Raster, so ist dies gekennzeichnet, das ist das Hauptraster hier, die die Elemente hat. Ich werde ein paar Reihen finden. Standardmäßig werden alle Zeilen automatisch angepasst, und Sie können sich die automatische Größe vorstellen, was bedeutet, dass die Dinge an den Inhalt anpassen, der sich darin befindet. Vielleicht möchten Sie das ändern, und so werde ich in diesem Fall einige Zeilen setzen, und ich werde sie 250 Pixel hoch machen. Das beginnt dann, uns das Layout zu geben, das wir wollen. Wir haben diese netten aufgeräumten Bilder. Wir haben eingestellte Zeilenhöhen, und wir haben die Untertitel, die die Bilder selbst überlagern. Nur um diesen Abschnitt zu beenden, möchte ich Ihnen ein weiteres kleines Feature des Rasterlayouts zeigen. Also, Sie können auf dieser Beschriftung sehen, wir haben einen zusätzlichen Text hier , der sehr nah an den Boden kommt. Weil wir diese auf 5em gesetzt haben, was eine absolute Länge ist. Es wird nicht größer als das werden. Es ist nicht wie die fr-Einheit, oder etwas, das auf die Textgröße reagieren würde. Was ich wirklich möchte, ist etwas zu haben, das von fester Höhe geht. Aber wenn ich mehr Text einfüge, möchte ich, dass er sich erweitert und mit diesem Text fertig wird. Denn, das ist die Realität der Arbeit im Web, ist, dass manchmal mehr Text, bekommen sehen. Wir können sehen, was passiert, wenn ich nur noch etwas mehr Inhalte hinzufüge. Es ist nicht ideal im Web, Inhalte zu haben, die im Allgemeinen eine feste Höhe haben, weil wir nicht dazu neigen zu wissen, wie großer Text sein wird oder wie viel Text am Ende wird. Sie können Ihr Design sorgfältig planen, und dann gelangt es in das Content-Management-System, und so fügt es viel mehr Text ein, als Sie erwartet haben. Also, Raster gibt uns eine Möglichkeit, damit umzugehen. Um eine gute Vorlagenzeilen zu erzeugen, haben Sie diesen 5em-Wert. Nun, was ich möchte, ist, dass, um ein Minimum zu werden, ich möchte, dass diese Tracks mindestens 5em groß sind, auch wenn wir nicht genug Inhalte haben. Zum Beispiel diese zweite Spur hier, die gerade eine Zeile bekam. Aber ich würde gerne, wenn ich zu viel Text da drin bekomme, möchte ich, dass es erweitert wird, und genau das macht die Minmax-Funktion. Also, was hier passiert ist, ist, wenn Sie minmax für Ihre Spurgröße verwenden, können Sie in einem Minimum passieren, das in unserem Fall 5em ist, und dann ein Komma verwenden, und dann übergeben Sie das Maximum. Also, für das Maximum hier verwende ich auto, und auto bedeutet wirklich die Größe des Inhalts in diesem Zusammenhang. Also, das bedeutet, dass, wenn wir mehr Text drin haben, die Spur wachsen wird. Wenn es nicht genug Text gibt, wäre es 5em. Was das auch hervorhebt, ist, dass unser internes Raster keine Beziehung zum nächsten internen Raster hat. Was Sie im Moment tun können, sagen Sie: „Nun, ich möchte, dass alles mit dem höchsten Element ausgerichtet ist, weil alle verschachtelten Gitter unabhängig vom äußeren Gitter sind.“ Wenn Sie den Speicherplatz in einer Spur klein machen, können Sie sehen, wie diese Beschriftung tatsächlich größer wird , um mit dem Umbruchtext fertig zu werden. Also, das ist eine kleine Funktion, die wirklich die Art und Weise widerspiegelt, wie die Dinge im Web sind. Die Tatsache, dass, wenn Sie etwas haben, das eine bestimmte Menge an Inhalten hat, es manchmal mehr Inhalte geben könnte. Um diesen Abschnitt zusammenzufassen, haben wir nun die internen Boxen im oberen Bereich gestylt, und das haben wir getan, indem wir ein Raster innerhalb des Rasters verschachtelt, das wir bereits hatten. Indem Sie die Elemente positionieren, beginnen Sie mit der zeilenbasierten Positionierung, über die wir später ein wenig mehr sprechen, um die Elemente zu positionieren und die Beschriftung über das Bild zu ziehen, das wir bereits platziert haben. Also, in einem Video, ein paar CSS-Eigenschaften, haben Sie viel über CSS-Grid gelernt, und die verschiedenen Dinge, die Sie damit tun können. 6. Kombinieren von manueller und automatischer Platzierung: Sie können weiter mit dem Beispiel folgen, an dem Sie arbeiten, oder Sie können die URL auf dem Bildschirm verwenden, um genau dort zu finden, wo ich jetzt bin. In dieser Lektion werden wir ein wenig mehr darüber nachdenken, wann Sie die automatische Platzierung und das Raster verwenden möchten , wenn Sie Ihre Elemente positionieren möchten und wie Sie die beiden Layout-Methoden mischen können. Sie können die automatische Platzierung bereits in unserer Verriegelung sehen. Wenn wir also unsere Raster für die vorgestellten Elemente definiert haben, haben wir nicht jedes dieser Elemente positioniert, sondern legen nur eins in jeder Zelle des Rasters an. Wir begannen, eine Platzierung zu machen, als wir die Innenräume dieser Gegenstände anlegten. Weil wir auf einem verschachtelten Gitter ein Raster definiert haben, und dann verwenden wir die linebasierte Positionierung, um Elemente in diesem Raster zu platzieren , damit wir diese Beschriftung über das Bild unten ziehen können. Wir schauen uns also an, wie wir tatsächlich positioniertes Layout verwenden möchten, das Sie Elemente im Raster platzieren, wenn wir unsere Inhalte hier anlegen. Sie können also im Moment sehen, dass der Inhalt direkt gegen den Rand des Ansichtsfensters nach oben verschoben wird . Es läuft bis an die Ränder und das ist wahrscheinlich nicht etwas, was Sie wollen. Also, vielleicht möchten Sie diese Trackliste ändern. Also, gehen Sie zu Vorlagenspalten und fügen Sie ein wenig eine Lücke auf beiden Seiten hinzu. Also, vielleicht hatten wir gerade eine Lücke von 10 Pixeln, und Sie können sehen, was passiert. Auto Placement versucht, all unsere Inhalte in diesen kleinen Track zu stopfen, und es ist überfüllt, weil es nicht in eine 10-Pixel-Track passt und ein bisschen Chaos aussieht. Das ist offensichtlich nicht etwas, was wir wollen. Also müssen wir den Inhalt positionieren, der nicht in diesem kleinen Track landet. Ich werde hier auch einige Zeilen hinzufügen. Denn sobald Sie mit dem Platzieren Ihrer Elemente beginnen, sollten Sie möglicherweise Zeilen hinzufügen, anstatt nur Zeilen im Raster erstellen zu lassen , damit Sie Elemente darin positionieren können. Also, ich werde eine Zeile oben hinzufügen, und dann eine automatische Zeile darunter. Also haben wir jetzt ein bisschen mehr von einem bestimmten Raster erstellt, und wir können damit beginnen, unsere Gegenstände darauf zu platzieren. Also, jetzt haben wir unser Raster eingerichtet und es etwas spezifischer gemacht. Lassen Sie uns den Inhalt auf diesem Raster positionieren. Der Inhalt ist direkt unten unserem HTML und es befindet sich in einem Artikel in der Klasse der Post. Also, wir können Post Ziel, und dann werden wir Grid-Spalte verwenden, und wir wollen nach Spalte Zeile zwei beginnen. Also, das wird diese kleine dünne Strecke vermeiden, die wir geschaffen haben. Wir mussten nur eine Spur überspannen, also können wir einfach Rasterspalte zwei sagen. Ich werde es tatsächlich so einrichten, dass es zwei Zeilen umfasst, die zu Zeilenspuren neu erstellt wurden. Lassen Sie uns also von Zeile 1 bis Zeile drei überspannen. Nun, da wir das nach Zeile und Spalte positioniert haben, ist das, was mit der automatischen Platzierung passiert ist, dass große Neupositionierung des Elements, das Sie platziert haben, und dann dauert es das nächste Element, das es findet, und die Dinge sind, wo die erste leere Zelle? Nun, die erste leere Zelle in diesem Fall ist in dieser kleinen dünnen Spur, wo wir nicht wollen, dass die Dinge gehen, und deshalb geht die Sidebar dann und sprang in diese Spur. Also müssen wir auch die Sidebar positionieren. Also, das hat eine Klasse von Seite eins. Wir gehen auf eine Seite wollen nach großer Spalte Zeile drei gehen. Ich möchte, dass es Teil weit unten im Inhalt erscheint, was bedeutet, dass wir es in eine Rasterzeile zwei einfügen können, die es dann den Inhalt nach unten bewegt. Es ist diese Art von Sache, die ohne Gitterlayout wirklich schwer zu tun war. Eigentlich war das Erstellen von Leerräumen über Elementen sehr, sehr schwierig, und so zeigt Ihnen dies nur eines dieser kleinen Dinge, die Sie mit Rasterlayout tun können , das früher sehr schwierig war und jetzt auf kreativere Weise verwendet werden kann. Weil wir unsere vier Einheiten haben, die unsere Spuren definieren und sagen, dass diese Reihe jetzt wächst und schrumpft wirklich schön mit dem verfügbaren Platz. Also, im oberen Bereich dieser Seite, werden wir Auto-Pace verwenden. Wir wollen so viele Gegenstände, wie du reinkommen und sich selbst auslegen musst. Was wir jedoch möchten, ist, das erste Element zu einem großen Feature zu machen, also es größer zu machen und tatsächlich mehr Zellen des Rasters zu überspannen. So können wir das tun, indem wir das erste Element in dieser Liste anvisieren. Also, das ist das erste Kind dieser Liste. Also, das wäre der Schwarm der Ballons und Luftschiffe in Richtung. Der erste untergeordnete Selektor wählt das erste untergeordnete Element des Containers aus. Also, hier sagen wir, ich möchte das erste Listenelement innerhalb der vorgestellten, die als unser erster Artikel hier erhalten wird, und das ist der Artikel, den wir über mehr Zellen strecken wollen. Ich möchte, dass dieses Element bei Spaltenzeile 1 und in Spaltenzeile drei beginnt und bei Zeile 1 und Ende von Zeile drei beginnt. Das würde nur platzieren, dass, machte das ein großes Bild, und dann die anderen Elemente weiterhin die automatische Platzierung verwenden. Also, Raster legen zuerst alle unsere Artikel und lassen es alle Zellen, die es aufnehmen muss, aufnehmen, dann wird es einfach fallen die Elemente daneben. Dies ist ein sehr gutes Beispiel dafür, wie Sie die automatische Platzierung von Elementen mit Positionierungselementen mischen können . Wenn Sie etwas haben, das Sie an einer bestimmten Stelle einer Seite haben möchten, können Sie es positionieren und dann einfach alle anderen Elemente für Sie platzieren lassen. Sie können sich also vorstellen, dass, wenn Sie versuchen, ein bestimmtes Bild oder einen großen Inhaltsbereich hervorzuheben , dies etwas ist, das Sie tun können, um diese Haloblöcke oben auf einer Seite zu erstellen , auf der Sie etwas Bestimmtes in das Design, indem es die meisten Spuren des Gitters überspannt. Sie können sehen, wie wir an dieser Stelle immer vier Tracks auf dem Startplatz haben. Also, wenn wir unsere Fenster kleiner machen, nimmt es nur so viel Platz ein wie für diese beiden Spuren, und wir können es vergrößern. Es ist also natürlich flexibel im gesamten Netz. Wenn wir weniger Platz haben oder mehr Platz haben, weil wir diese FR-Einheiten benutzen, wird der Raum einfach proportional verteilt. So nimmt ein großes Bild immer zwei Spuren des Rasters ein, auch wenn diese Lkw kleiner oder größer sind, was es natürlich flexibel macht. Also, die sehr kleine Menge an CSS, wir haben keine große Menge an CSS geschrieben. Sie haben hier das Grundlayout für Ihren Blog. Wir haben Noten kombiniert, indem wir sie verschachtelt haben, wir haben die Positionierung verwendet und wir haben auch die automatische Platzierung verwendet. Wir haben über verschiedene Möglichkeiten zur Größe von Spuren mit den FR-Einheiten und auch durch die Verwendung von Lead-Einheiten gelernt , und Dinge, die die Minmax-Bewegungen, wissen Sie, wie man etwas, das bei einer festen Größe beginnt , aber wächst zu Inhalt enthalten. Was wir hier wirklich haben, ist Ihr Desktop-Layout für Ihren Blog. Ich werde es auslegen. Es ist flexibel, es ist noch nicht ganz ansprechbar. Und so werden wir in der nächsten Lektion einen Blick darauf werfen, wie man dieses Layout nimmt und es bei sehr kleinen Bildschirmgrößen wirklich gut macht. 7. Integrieren von Reaktionsfähigkeit: Sie können dem Beispiel folgen, an dem wir gearbeitet haben. Wenn Sie mit dem Punkt beginnen möchten, an dem ich mich gerade befinde, dann verwenden Sie die URL, die auf dem Bildschirm ist. In der letzten Lektion befassten wir uns mit der Platzierung von Manu im Vergleich zur automatischen Platzierung und zeigten, wie wir dieses flexible Layout hatten, aber es war noch nicht ganz reaktionsschnell. In dieser Lektion werden wir uns also darum kümmern, ein ansprechendes Layout zu erstellen , das uns dabei hilft, eine Version zu erstellen, die wirklich, wirklich gut auf kleinen Bildschirmen funktioniert hat . Ein ansprechendes Design reagiert auf jedes Gerät, das Sie verwenden. Im Internet verwenden die Leute heute winzige Telefone mit sehr kleinen Bildschirmen, sie verwenden Tablets, sie verwenden Desktop-Computer mit riesigen Bildschirmen. Also, wir schaffen ein Responsive Design bedeutet, dass es auf jedem dieser Bildschirme in verschiedenen Layouts gleich gut funktioniert , so dass wir das Layout ändern können, um die Bildschirmgröße zu nutzen, die wir haben. Ich werde Ihnen zeigen, wie Sie flexiblen Blog-Beitrag abheben, und es in ein reaktionsfähiges Design mit einem kleinen Bildschirm-Layout verwandeln. Das Layout, das wir erstellt haben, ist flexibel. Also, da wir weniger Platz oder mehr Platz haben, verteilen sich die Räume zwischen unseren Spuren aufgrund der Verwendung der FR-Einheit. Sobald wir jedoch sehr klein sind, wird es ein wenig schwer zu lesen. Sie würden so etwas nicht wirklich auf einem Mobiltelefon lesen wollen, es ist nicht ideal. Also, jetzt werden wir uns ansehen, wie man dies in ein reaktionsfähiges Layout macht, um ein anderes Layout für diese kleinen Bildschirmgeräte zu erstellen. So können Sie ein paar Dinge mit Rasterlayout tun. Sie können Ihr Raster neu definieren, und Sie können neu definieren, wo sich Dinge tatsächlich diesem Raster befindet, nachdem Sie Änderungen vorgenommen haben. Also, schauen wir uns mal an. Was ich tun werde, ist, dass ich eine Medienabfrage hinzufügen werde. Was ich hier sage, ist, dass ich eine Minwidth verwenden werde, also wenn die Dinge auf eine Mindestbreite kommen, ein 50 em, das ist, wo ich einen Haltepunkt hinzufügen werde. Nun, wenn Sie diese Haltepunkte hinzufügen, denken Sie nicht zu viel über bestimmte Geräte nach, denken Sie nicht gut, wie groß ist ein iPad? Oder wie groß ist ein Telefon? Sorgen Sie sich darüber, wann Ihr Design bricht, machen Sie sich Sorgen darüber, wann die Linien zu kurz oder zu lang werden, und das ist wirklich, wo Sie diese Haltepunkte hinzufügen sollten. Also, machen Sie sich keine Sorgen über die Größe der Geräte denn wirklich gibt es so viele verschiedene Geräte. Es lohnt sich nicht, sich darüber Gedanken zu machen. Denken Sie einfach an Ihr Design, wann wird es zu schmal oder zu breit. In diesem Fall werde ich für 50 em gehen, und das ist, wo, weil wir sagen Mindestbreite, das ist, was wir eigentlich ein breiteres Layout wollen, ein Desktop-Layout, das ist, was wir bereits erstellt haben, wir wollen, dass . Also, wir haben es mit dem vorgestellten Panel an der Spitze zu tun. Was ich tun werde, ist, dass ich mir die Spalten und Reihen schnappen und die hier hinlegen werde . Nun, was das bedeutet, ist, dass ich jetzt das obige Raster für unsere kleineren Bildschirme neu definieren kann. Was ich für kleine Bildschirme tun möchte, ist, dass ich nur zwei Spaltenspuren haben werde. Also, ich werde zwei Spaltenspuren verschieben, und ich werde Gittervorlagenzeilen ändern und ich werde eine andere Eigenschaft verwenden, eine, die wir vorher nicht gesehen haben, und das sind Rasterzeilen. Wir werden minmax hier verwenden, und sagen wir, Grid Auto Zeilen 250 Pixel, Auto. Nun, was Grid-Auto-Zeilen tun, ist, wenn wir Zeilen in unserem Raster erhalten, die automatisch erstellt werden, um Inhalt zu setzen, es werden sie in dieser Größe erstellt. Es werden mindestens 250 Pixel hoch und ein Maximum von auto sein. Jetzt hat sich noch nichts geändert, aber lassen Sie uns kleiner werden, und Sie können sehen, wie sich das Layout ändert. Sobald wir zu diesem 50 em, sobald wir unter 50 em, gehen wir zu unserem kleinsten Bildschirm-Layout für dieses Panel, weil wir nur zwei Spuren haben, Gitter platziert unser großes Element an der Spitze, und die kleineren Elemente unten. Dies ist ein bisschen schöneres Layout für unsere kleineren Geräte, und dann, wenn wir größer werden, kommen wir zu den 50 ems, und wir fangen zurück zu unserem ursprünglichen Layout für das vorgestellte Panel. Also, was wir hier tun, wird manchmal als unbewegliches erstes Layout bezeichnet , das im Grunde das einrichtet, was Sie für Ihren kleinen Bildschirm haben, und dann definieren Sie es für die größeren Bildschirme neu. Also, wir haben zwei Spalten für einen kleinen Bildschirm, und dann sagen wir, wenn wir auf eine Mindestbreite von 50 em, wir werden dann vier Spalten haben. die Eigenschaft Rastervorlage Spalten erneut verwenden, überschreiben wir die vorherige Anweisung, sobald wir breit genug sind, um vier Spalten zu haben, und so funktioniert CSS. Dinge, die später in der Stylesheet kommen, überschreiben Dinge, die früher kommen. Also, Sie haben zuerst Ihre mobilen Sachen, und dann überschreiben Sie es mit Ihrer sofortigen Abfrage und gehen zu einem vollständigen Spaltenlayout. Also, im Moment verwenden wir unser zweispaltiges Layout und Sie können das sehen, weil unser großes Element, das zwei Spuren überspannt, sich über zwei Spuren an der Spitze erstreckt und die anderen Elemente unten kommen. Wenn wir zu 50 em kommen, können Sie sehen, dass sie zurück zu unserem Desktop-Layout springen. Also, wir können die gleiche Art von Sache mit der Unterseite des Layouts tun. Da wir sehr klein sind, haben wir am Ende nicht viel Platz für die Sidebar, um sich hier zu setzen, und alles wird ein bisschen schmal. So können wir wieder Änderungen an der Funktionsweise dieses Layouts vornehmen. Also, noch einmal, werden wir unsere Medienabfrage hinzufügen. Ich werde den gleichen Haltepunkt verwenden. Diesmal werden wir die gleiche Art von Sache mit Inhalten machen. Ich werde meine Spalten und meine Zeilen greifen und sie in die Medienabfrage einfügen, und dann können wir das obige Raster neu definieren. Also, was ich im Wesentlichen tun möchte, ist nur eine große zentrale Spalte zu haben, und wir müssen uns keine Sorgen um die Zeilen hier machen, wir können das einfach hinzufügen. Dann muss ich auch die Positionierung nehmen und das auch in den Medienabfragen auftauchen, so dass es Sinn macht sobald wir ein breiteres Layout mit den Tracks haben, die wir wollen. So, jetzt können Sie sehen, dass die kleinen Bildschirme, dies ist zurück zu versuchen, unsere Inhalte in diese dünne Spur stopfen gegangen. Also, was wir tun müssen, ist sowohl unseren Seitenknochen als auch unseren Inhalt nach dieser dünnen Spur beginnen zu lassen. Also, sie enden mit einer Klasse von Post und der von Seite eins, die den tatsächlichen Hauptteil unseres Artikels und der Seitenleiste darstellt, jetzt beginnen beide nach Gitterspalte Zeile zwei. Also, das ist die Zeile, nachdem Sie irgendeine Sidebar dort gefragt haben. Sie können sehen, ob wir nach unten scrollen, dies ist die Seitenleiste. Sie können immer eine Hintergrundfarbe darauf setzen oder etwas tun , um sie zu differenzieren, wenn Sie möchten. Das ist wirklich, was Sie mit mobilen Layouts tun, Sie müssen Dinge in einer nützlichen Reihenfolge stapeln, und das ist, wenn das Raster es ziemlich einfach macht. Dann, wenn wir weiter gehen, sobald wir die 50 em getroffen, Sie sehen die Seitenleiste springt an Ort und Stelle, weil wieder, wir haben die Anweisungen überschrieben, um gleich nach Gitterspalte Zeile zwei und fügen Sie es in einer Reihe, und dann die Rasterspalte Zeile drei für die Seitenleiste. Also, wir richten es für mobile und dann unten, innerhalb der Medium-Abfragen, wir richten es für den Desktop. So haben wir jetzt ein einfaches ansprechendes Layout erstellt. So können Sie hier sehen, wie wir, wenn wir kleiner werden, jetzt ein schönes mobiles Layout bekommen, und wir können nach unten scrollen und das ist alles perfekt lesbar. Wenn wir uns dann ausstrecken, gehen wir zurück zu unserer Desktop-Ansicht. Die Sache ist mit Grid wirklich brauchen Sie sehr wenig CSS, um dies zu erreichen, und wir haben gerade in einem Haltepunkt hinzugefügt. In einem komplexen Entwurf können Sie nun mehrere Haltepunkte hinzufügen. Vielleicht möchten Sie ein Layout erstellen, das sehr große Bildschirme nutzt, und fügen Sie es einen weiteren Haltepunkt hinzu, oder Sie möchten vielleicht sagen, diese sehr lineare, sehr winzige Telefone erstellen. Da Sie dafür nicht viel CSS benötigen und es nicht sehr schwierig ist, Ihr Design wirklich an alle verschiedenen Arten von Geräten anzupassen , die da draußen sind. Also, wir sind ziemlich fertig mit der Verwendung von Grid, um unsere Seite zu gestalten, und Sie können sehen, wie wir aus ein paar Zeilen Code von etwas gehen mussten, bei dem wir gerade all unsere Inhalte eine Sache unter der anderen angelegthaben unsere Inhalte eine Sache unter der anderen angelegt zu einem Layout, das Sie online für einen Blog-Beitrag stellen könnten, und wir haben auch das reaktionsschnell gemacht. Sie haben also ein Layout, das für verschiedene Geräte funktioniert. Also, wir werden in der nächsten Lektion weitermachen, nur um ein wenig darüber nachzudenken wie Raster zusammen mit anderen Layoutmethoden funktioniert. 8. Kombinieren von Layouts: Wir wollen den letzten Teil unseres Layouts und Sie können mit der Ebene folgen, die Sie bisher erstellt haben, oder Sie können die URL auf dem Bildschirm jetzt verwenden, um genau dort zu finden, wo ich bin. In dieser letzten Lektion werde ich über einen Ort sprechen, an dem Sie Grid überhaupt nicht verwenden möchten und wie wir Flexbox verwenden können, um die Navigation zu gestalten. Meine Navigation, ich möchte in einer Zeile anlegen, was es zu einem guten Kandidaten für ein Flexbox-Layout macht. Also, schauen wir uns mal an. Also, im HTML, können wir die Navigation in einer geordneten Liste sehen, da wir Artikel, Ereignisse, Ressourcen und Kontaktieren Sie mich haben . Hinzufügen des CSS. Das ist die ungeordnete Liste hier, die in der Kopfzeile. Sobald agai, n Ich habe den Rand und die Auffüllung und die Liste Styling, die Sie standardmäßig auf einer Liste erhalten würden, entfernt. Nun, um dies zu einem Flex-Layout zu machen , muss ich nur sagen, „display: flex“. Sofort springen sie alle in eine Zeile, und das liegt daran, dass die Standardanzeige für Flexbox, Listenfeld Wert ist, die Flexrichtung der Zeilen zu haben, so dass die Dinge alle in einer Zeile aufgereiht sind. Das ist wirklich alles, was wir tun müssen. Wenn Sie dies im Vergleich zu einem Rasterlayout machen würden, müssten Sie damit beginnen, viel mehr Entscheidungen über das Layout zu treffen. Also würden wir sagen „Display: Grid“ dann, na ja, nichts würde passieren, und wir müssten daran denken, unsere Spalten einzurichten. Vielleicht könnten wir vier Säulen haben. Nun, dies könnte gut funktionieren, wenn Sie wussten, dass Sie immer vier Elemente in Ihrer Navigation haben. Sie wollten, dass sie gleichmäßig verteilt sind oder dass Sie möglicherweise eine mehrstufige Navigation haben. Sie haben zwei Zeilen mit Inhalt. Nun, in diesem Fall wäre die Verwendung von Grid eine gute Wahl. Aber in unserem Fall wollen wir nur, dass diese Gegenstände nebeneinander stehen. Also, es ist viel einfacher, nur zu sagen, „display: flex“ und das gibt mir das Layout, das ich wirklich will. Sie würden also Flexbox wählen, wenn Sie nur Dinge in einer Dimension anlegen möchten, also als Zeile oder Spalte. In diesem Fall wollten wir sie als Reihe, und so ist Flexbox eine gute Wahl. Mit unserem Blogbeitrag Featured Item ist dies zweidimensional, weil wir Dinge in Zeilen und in Spalten auslegen wollen. Wir wollen, dass sie sich sowohl in ihren Spalten als auch in ihren Reihen aufstellen. Das ist ein zweidimensionales Layout. Deshalb habe ich mich für Grid entschieden. Also, das ist so ziemlich der Grund, warum du das eine oder andere wählen würdest. Mit Grid können Sie das gesamte Grid auf dem übergeordneten Element definieren und dann passen Elemente einfach hinein, was eine ziemlich schöne Art zu arbeiten ist. Also, das ist wirklich eine andere Möglichkeit, Grid zu wählen, ist, wenn Sie diese Art von großen Setup tun, die übergeordneten Elemente bilden und dann einfach die Dinge mit der automatischen Platzierung einlassen möchten. Flexbox ist sehr viel nur darum, eine Reihe von Dingen zu nehmen und sie zu verbreiten. Also, das sind wirklich alle Schritte, die Sie brauchen, um eine Blog-Listing-Seite zu erstellen. Sie keine Angst, dies als Ausgangspunkt zu verwenden und kreativ zu werden und Änderungen vorzunehmen und zu sehen, wie sich Grid verhält. Der beste Weg, CSS zu lernen, ist absolut mit CSS zu spielen. Denken Sie daran, wenn Sie viele Änderungen vorgenommen haben und Sie es exportieren und auf Ihrer eigenen Website verwenden möchten , in Ihrer Ansicht in CodePen haben Sie in Ihrer Ansicht in CodePendiesen kleinen Export-Button. Wenn Sie darauf klicken, können Sie eine Zip exportieren und das wird Ihnen alles geben. Es wird Ihnen das CSS und das HTML geben. Also, Sie können es dann woanders verwenden oder es in einem Code-Editor auf Ihrem Desktop öffnen und dort mit ihm spielen. Also, ich hoffe, das war wirklich nützlich, um zu lernen, wie man einen Blogbeitrag erstellt. Sie haben auf dem Weg viel über CSS Grid gelernt. 9. Letzte Gedanken: Also, in dieser Klasse haben Sie von nichts über CSS-Gitter zu wissen, um mehrere der Eigenschaften von CSS-Raster verwenden zu können , um natürliche Webseite zu erstellen. Du könntest dieses Zeug jetzt auf einer echten Webseite in der Produktion verwenden. Sie haben gelernt, wie Sie ein Raster definieren, wie Sie Stützen- und Straßenspuren einrichten und die LWL-Einheit und Dinge wie minmax verwenden, damit Sie eine Mindestgröße und eine maximale Größe angeben können. Wir haben uns die Verschachtelung von Gittern und auch die Schaffung eines einfachen Responsive Design angesehen. Wir haben auch gesehen, warum Sie Raster über andere Layoutmethoden verwenden möchten. Also, Sie sind wirklich bereit, dieses Zeug in der realen Welt zu verwenden. Ich würde gerne sehen, Ihre Blog-Listing-Seiten oder was auch immer Sie tun, ist der Sprung aus diesem Projekt. Laden Sie diese bitte in die Projektgalerie hoch, damit wir alle einen Blick werfen können. Ich hoffe, wir genießen diese Klasse. Es gibt so viele verschiedene Richtungen, dass Sie dieses Zeug nehmen können , egal ob es auf kreative Weise ist, oder einfach nur in einer Straffung die Art und Weise, wie Sie Dinge erstellen, die Sie bereits tun müssen. Ich freue mich sehr darauf, zu sehen, was du damit machst. 10. Entdecke mehr Kurse auf Skillshare: