Transkripte
1. Einführung in den Kurs: Hallo, mein Name ist Luke Faddish, ich bin seit fast 20 Jahren professioneller Softwareentwickler. Aber heute bin ich super aufgeregt, unsere Klasse zu starten. In dieser Klasse werden wir lernen, wie wir
CSS-Grid verwenden können , um ein Online-Web-Portfolio aufzubauen. Wenn Sie nicht mit ihm vertraut sind, ist
CSS Gier der neue CSS-Standard für das Layout komplexer Webseiten. Zuvor mussten
wir dazu große Frameworks wie Bootstrap und Foundation
oder eine Reihe von CSS-Hacks verwenden, die in
jedem Browser anders angezeigt wurden, und das ist das Problem, das CSS-Grid für uns löst. Während dieser Klasse, wird dieses Online-Web-Portfolio implementieren , das sieht und funktioniert gut in Desktop- und mobilen Geräten. Ich habe auch eine Reihe von Ressourcen in
den Projektbereich eingefügt , um es super einfach zu machen, Ihr Projekt zu starten. Ich werde bei jedem Schritt des Weges während dieser Klasse bei Ihnen sein Wenn Sie
also Probleme haben oder Hilfe benötigen, zögern Sie nicht, mich im Community-Diskussionsbereich dieser Klasse zu informieren. Ansonsten freue ich mich darauf, zu sehen, was Sie mit CSS-Grid erstellen.
2. FÜR WEN DIESER KURS GEEIGNET IST: Für wen ist diese Klasse? Diese Klasse ist für alle, die lernen möchten, wie man
ein Web-Layout mit Zeilen und Spalten erstellt . Das ist es, was CSS uns gibt. Es ist eine Klasse der mittleren Ebene. Ich gehe davon aus, dass Sie bereits ein wenig HTML,
CSS kennen und dass Sie einen Texteditor verwenden können. Wenn das nicht der Fall ist, mach dir
keine Sorgen, denn wir sind hier auf Skill-Anteil. Sie können Klassen zu all diesen Dingen mit einer sehr schnellen Suche finden. Gehen Sie los und tun Sie das, wenn Sie müssen, und dann kommen Sie zurück zu diesem Kurs. Ansonsten setzen Sie sich für die nächste Lektion fest, wo wir im Detail übergehen, was wir während dieses Kurses lernen werden.
3. Was wir in diesem Kurs behandeln werden: Willkommen zurück zu unserem CSS Grid Lektion. Dies wird ein sehr schneller Überblick über das, was Sie in dieser Klasse lernen werden. Das allererste, was wir tun müssen, ist darüber zu sprechen, was CSS-Grid und um darüber zu erfahren, müssen
wir wissen, was ein Layoutsystem in CSS ist. Wir werden darüber reden, was das ist. Wir werden über andere CSS-Layoutsysteme sprechen. Wir werden sehen, wie CSS-Raster anders ist und schließlich, wo wir es verwenden können. Dann gehen wir in, wie wir CSS-Rasterspalten definieren können, müssen
wir Display-Grid verwenden. Wir werden herausfinden, wie Spalten mit Rastervorlagenspalten erstellt werden, die eine CSS-Stilregel ist. Dann werden wir herausfinden, was die FR-Einheit ist, wenn wir Säulen messen. Dann werden wir an einem sehr einfachen Beispiel arbeiten, das die Verwendung der CSS-Stilregeln
demonstriert. Danach werden wir ein umfassenderes und vollständigeres Layout erstellen. Hier beginnen wir mit unserem Klassenprojekt, welches das Portfolio ist. Wir erfahren, wie wir ein Raster mithilfe von Rastervorlagenbereichen malen können. Wir werden über Rasterfläche,
Kinder sehen , und wir werden an unserem Hauptprojekt arbeiten. Wie ich schon sagte, das Portfolio werden wir auch ein wenig Zeit damit verbringen,
darüber zu reden, wie wir Inhalte innerhalb von Spalten positionieren können. Dafür verwenden wir die CSS-Regel „Selbstjustifizieren“ und auch „Align-self“. Dann werden wir schließlich daran arbeiten, etwas Platz im Raster zu schaffen, indem wir Gitterlücke verwenden. Das allerletzte, worüber wir wirklich sprechen müssen, ist wie wir unser Rasterlayout reaktionsschnell gestalten können. Wie machen wir es gut aussehen auf Desktop-Browsern und auf Mobil- und Telefon-Browsern als auch. Wir machen unser Layout reaktionsschnell und wir werden @
Medienabfragen verwenden , um verschiedene Layouts zu definieren. Setzen Sie sich fest für das nächste Video, wo wir darüber sprechen, was CSS Grid tatsächlich ist.
4. Was ist CSS Raster?: Hallo an alle, willkommen zurück zu unserem CSS Grid Einführung. In diesem Video werden wir darüber sprechen, was Gitter eigentlich ist. Bevor wir darüber sprechen, müssen
wir wirklich darüber sprechen, was das Layout-System ist weil dies sagt, Grid ist ein neues Layout-System. Layout-System ist eine Reihe von Regeln, die Webbrowser verwenden, um Elemente auf einer Seite vorhersehbar anzuordnen. Klingt nach einem kleinen Gedicht. Der Punkt hier ist, dass Browser diesen Standardsatz von Regeln verwenden
, um unsere Elemente anzuordnen , dh wie H1s, divs und Spannweiten und solche Dinge auf vorhersehbare Weise. Die Webseiten sehen in verschiedenen Browsern mehr oder weniger gleich und legen Sie das Standard-CSS-Layout fest, um alles wie eine Box zu behandeln. Die Dinge sind entweder übereinander oder nebeneinander gestapelt. Wenn wir eine Webseite haben, ist
dieser Farbverlauf wie die Webseite hier. Wir könnten wie ein großes breites div haben, das als Header übergeht. Unser Hauptabschnitt wäre darunter gestapelt, wir stapeln nicht wirklich übereinander, das Stapeln darunter, aber Sie bekommen die Idee. Dann haben wir da drinnen Dinge, die nebeneinander oder übereinander sind. Das war großartig zurück, als Websites so aussahen. Aber seitdem hacken
wir uns am
Standard-Layout-System ab , so dass wir Webseiten mehr so aussehen lassen können. Wenn wir nicht wollen, dass unsere Webseiten wie eine Zeitung aussehen, wollen
wir dennoch, dass die Dinge in Zeilen und Spalten angeordnet sind. Sie können hier sehen, dass ich ein paar Zeilen angelegt habe, um zu zeigen, wovon wir hier reden. Was CSS-Raster für uns tun kann, ist Zeilen zu definieren. Nun wäre eine Zeile dieser Abschnitt, wo wir Neuigkeiten haben, die große Überschrift dort und dann darunter haben wir eine weitere Zeile, die alle Nachrichteninhalte enthält. Dann können wir Spalten definieren. Sie können sehen, dass die Nachrichteninhalte wie die zweite Reihe dort, mit Dingen darin. Sie können Spalten definieren, in die Dinge eingefügt werden sollen. Wir können Dinge in diesen Säulen arrangieren. Nun, hier kommt wie das Standard-CSS-Box-Layout-System wieder ins Spiel. Die Dinge werden dort auf die übliche Weise arrangiert. Es ist nur so, dass wir einige Teile
der Seite abgeschnitten haben , so dass sie ein wenig anders behandelt werden. Das ist das CSS-Rasterlayout-System. Es gibt uns jedoch die Möglichkeit, Dinge
in diesen Spalten auch ein bisschen anders anzuordnen . Wir können sie verschiedene Styling-Regeln verwenden, um sie horizontal oder vertikal zu zentrieren, was immer eine große CSS-Herausforderung war. Wir könnten auch Dachrinnen schaffen. Nun, Dachrinnen sind diese Leerzeichen zwischen Zeilen und Spalten, die unserer Seite ein wenig Atemraum
geben den Raum Dinge aus ein wenig machen es nicht zu überfüllt aussehen. Gibt es
jetzt einen Haken für die Verwendung von CSS-Grid , da es all diese tollen Dinge für uns tut? Dies ist der Haken genau hier zum Zeitpunkt der Aufnahme dieses Videos 75,34 Prozent des Internets ist mit einem Browser, der CSS-Grid unterstützt. Nun, das ist nicht viel von einem Haken, weil diese Zahl ständig zunimmt und sie ziemlich schnell zugenommen hat. Sie müssen jedoch wissen, dass, wenn Sie CSS-Grid
auf einer Website oder etwa drei Viertel des Internets verwenden , Lage sein wird, es so zu verwenden, wie Sie es beabsichtigt haben. Aber wie ich schon sagte, diese Zahl steigt ständig. Ich denke, CSS-Grid ist etwas, das wir alle für die Zukunft lernen müssen.
5. So definierst du CSS Grid: Hallo und willkommen zurück zu unserer Einführung in CSS Grid, wo wir unser eigenes Online-Portfolio aufbauen werden. In dieser Lektion werden wir nicht an unserem Portfolio arbeiten. Wir werden anfangen, einige CSS in Rasterspalten zu definieren, und wir werden eine andere kleine Beispielseite verwenden, um dies zu tun. Was werden wir in diesem Video abdecken? Wir werden sehen, wie wir CSS-Rasterspalten definieren können. Wir werden herausfinden, was die FR-Einheit ist. Wir werden Inhalte in einer Spalte arrangieren, und wir werden dies tun, indem wir diese lustige kleine Beispielseite hier erstellen. Sie können sehen, wo Kachelungen und Inhalte auf der Seite. Das allererste, was wir tun müssen, ist, den HTML-Code zu überprüfen, den wir verwenden werden, um dies zu tun. Jetzt werden wir diesen HTML-Code nicht bearbeiten. Wir werden nur mit unserem CSS arbeiten. Es ist jedoch eine gute Idee für uns, mit
der Struktur der Seite vertraut zu sein , mit der wir arbeiten, wenn wir unser CSS bearbeiten. Der gesamte Code, mit dem wir heute arbeiten, ist im
Abschnitt Projektressourcen und in der Spalte CSS Grid example.zip verfügbar . Sie können den HTML, das CSS und die Bilder, die wir für
diese kleine Seite verwenden , finden, so dass Sie auch mit ihm arbeiten können. Aber zuerst, hier ist unser HTML. Hier sind wir in unserem Code, der uns den HTML ansieht und Sie können sehen, dass wir eine ziemlich typische HTML-Webseite haben. Wir verlinken auf unsere CSS Grid Spalten, .CSS hier. Dann schauen wir uns den Körper der Webseite an, dem wir interessiert sind. Sie können sehen, wir haben ein Asset mit Klassencontainer und innen, dass wir eine Reihe von anderen haben. Einer von ihnen hat ein H1 darin,
und dann vier haben Bilder in ihnen: Straße 1, 2, 3 und 4. jpg. Dann haben wir endlich ein paar Credits. Von hier bekommen wir unsere Straßenpfirsiche und das ist alles, was es zu unserem HTML gibt. Wie ich schon sagte, wir werden das nicht bearbeiten, aber wir müssen wissen, dass wir einen mit Klassencontainer haben und darin <div> eine Reihe von anderen haben <div>, die unseren Inhalt enthalten. Als nächstes haben wir eine kleine Einführung in unser CSS. Hier ist unser aktuelles CSS. Wie Sie sehen können, ist es ziemlich einfach. Wir haben eine Topographie für den Körper eingerichtet und unsere Ränder auf Null zurückgesetzt. Wir geben unserem H1 eine große Schriftgröße und wir sagten, dass alle unsere Bilder 100 Prozent des Containers einnehmen
werden, in dem sie sich befinden. Dann hier unten haben wir diese zwei kleinen einsamen CSS-Selektoren, Container und dann ist in dem Container und hier werden wir unseren CSS-Grid-Code setzen. Gehen wir zurück zur Präsentation und sehen, was wir tun
werden, um unsere kleine Webseite umzusetzen. Lassen Sie uns zunächst einen Blick darauf werfen, wie unsere Webseite jetzt
ohne unseren CSS-Grid-Code aussieht und hier ist es. Wie Sie sehen können, sieht es ziemlich verrottet aus. Wir haben diese enormen Bilder und unsere Kopfzeile oben und dann unsere Credits unten unten. Dies sieht nichts wie das Beispiel aus, das wir in der Präsentation gesehen haben. Lasst uns das jetzt reparieren. Unsere allererste Rasterstil-Regel wird das Anzeigeraster sein. Wie Sie wissen, können wir unsere Anzeigeregel so einstellen, dass Blockierung oder Inline-Block oder Flex das CSS-Raster. Wenn wir Dinge mit dem CSS-Rasterlayout-System überlagern, müssen
wir den Anzeigewert oder die Anzeigeregel auf Raster setzen. Das geht auf den Selektor für das übergeordnete Element. Dies ist das Element, das alles andere enthält, das innerhalb des Rasters organisiert werden soll. Lasst uns das jetzt machen. Hier sind wir wieder in unserem CSS und Sie können sehen, dass wir unsere Container-Klasse haben. Denken Sie daran, dass dies das Element ist, das den restlichen Inhalt der Webseite enthält. Das erste, was ich tun werde, ist Anzeige sagen, geben Sie ein Gitter ein. Auch das wird unserer Webseite wirklich nicht
sehr helfen , denn wenn ich das ein Reload gebe und Sie sehen, alles,
was wir geschafft haben , ist unsere Credits über die Spitze
unserer Bilder zu stecken und alles andere ist ziemlich erotisch angelegt. Wir können damit beginnen, dies zu beheben, indem wir unseren nächsten CSS-Rasterstil anwenden, der
die Rastervorlagenspalten-Stilregel ist. Dies ist die Regel, die wir verwenden, um zu definieren, wie viele Spalten unser Raster haben wird und welche Größe sie haben, und warten darauf. Dies ist eine der Möglichkeiten, die wir verwenden können, um die Größe dieser Spalten zu beschreiben. Wir verwenden diese merkwürdige Einheit namens fr. Jetzt könnten wir leicht einen Prozentwert, einen M-Wert,
einen Pixelwert, so ziemlich jede andere Art von Einheit verwenden , die Sie in CSS verwenden können, können
Sie hier setzen. Ich benutze jedoch die fr-Einheit, weil es
für CSS-Grid ziemlich idiomatisch ist und auch, weil es eine ziemlich interessante Sache ist. Was fr steht, ist Bruch und wenn wir 1fr 1fr 1fr 1fr 1fr haben, sieht
es irgendwie seltsam aus, wir haben nichts, um diesen Wert zu beziehen. Aber was das eigentlich bedeutet, ist, weil wir hier drei Werte angegeben haben, das CSS-Raster sagt, dass wir wollen, dass es in
drei Bits gehackt wird und weil jeder Wert eins und eins und eins gleich ist, bedeutet das, dass jeder entspricht einem Drittel der Seite. Nun, ich muss Ihnen sagen, ich habe am Anfang ein wenig mit
dieser ganzen Idee gekämpft , weil das wirklich intuitiv erscheint. Ich will drei Bits und ich möchte, dass sie gleich groß sind , aber ich bin nicht daran gewöhnt, dass ein Computer so viel für mich denkt. Es ist irgendwie so intuitiv für mich, dass ich es konterintuitiv fand. Ich weiß nicht, was du darüber hältst. Wenn wir jedoch 2fr 1fr 1fr gesagt hätten, so gab es noch drei Messungen vorgesehen, aber die erste war zwei und die andere waren eins; das würde bedeuten, dass die erste 50 Prozent
der Seite belegen würde und die anderen beiden würden jeweils 25 Prozent besetzen. Jetzt schauen wir uns ein bisschen mehr an, wie die fr-Einheit für später in der Klasse funktioniert. Lassen Sie uns jedoch vorerst einen Blick werfen und sehen, wie sich dies auf das Layout unserer Webseite auswirkt. Hier unterstützen wir in unserem CSS und Grid-Template-Spalten muss in das übergeordnete Element gehen, das Element, das alles andere enthalten oder halten wird, was wir wollen mit CSS-Rasterspalten organisiert
werden. Wir können 1fr 1fr 1fr 1fr sagen, das können wir speichern. Dann können wir zurück zu unserer Webseite gehen und es neu geladen und heilige Molly, plötzlich ist alles organisiert. Sie können sehen, dass wir angegeben haben, dass es drei Spalten gibt, aber wenn Sie sich in unserem HTML erinnern, haben
wir wie 1, 2, 3, 4, 5, 6 s hier und weil wir mehr Elemente angegeben haben, als wir Spalten haben, welche CSS Grid für uns getan hat, ist es, sie in eine neue Zeile zu wickeln. Das ist ziemlich praktisch, oder? Wir haben jedes dieser Dinge, die ein Drittel des Bildschirms und des CSS-Rasters einnehmen, weil wir drei Spalten angegeben haben, indem wir ihm sechs Dinge zur Anzeige gegeben haben, es wickelt sie in eine neue Zeile und legt sie immer noch in geraden Spalten. Etwas, das ich erwähnen sollte fragen
Sie sich vielleicht, na ja, was wäre, wenn ich 20 Spalten
hätte, müsste ich 1fr 20 mal schreiben? Das wäre wirklich langweilig. Glücklicherweise haben wir im CSS-Raster dieses Ding namens wiederholen, was diese Quickie kleine CSS-Funktion ist, die
besagt, dass wir x Anzahl von Dingen einer bestimmten Größe wollen. In diesem Fall können wir sagen, dass wir drei 1frs haben und das Ergebnis davon ist, dass, wenn ich nachlade, dass es genau das gleiche ist, wir sehen können, dass unsere Straßen Schlagzeile und unsere Credits oben links in ihren Zellen eingeklemmt
sind und wir Beheben Sie das. Vielen Dank. Mal sehen, welches CSS wir im CSS-Grid-Layout-System verwenden können, um das zu beheben. Dies ist wirklich ein Thema der Anordnung von Inhalten in einer Spalte. Jetzt werden wir die Rechtfertigungs-Self-Regel,
Zentrum und Align-selbst verwenden : Zentrum. Was bedeuten das? Rechtfertigungs-Selbst spricht davon, Dinge horizontal zu arrangieren. Wir können Mitte, rechts, links und so weiter haben. In diesem Fall setzen wir es auf die Mitte, also wollen wir, dass die Dinge horizontal in der Mitte liegen. Dann geht es beim Ausrichten von selbst darum, Dinge vertikal auszurichten, so dass wir die Dinge nach oben
oder nach unten oder wo auch immer einer Zelle kleben können . In diesem Fall wollen
wir wieder, dass es in der Mitte ist. Nun wenden wir dies auf etwas an, das sich in unserem Gittercontainer befindet, nicht auf den Gittercontainer selbst. Du wirst sehen, was ich meine. Hier sind wir wieder in unserem CSS, und dieses Mal wollen wir die Rechtfertigungs-Selbst- und
Align-Self-Regeln auf s anwenden <div>, die in unserem Container sind. Da gehen wir. Wenn wir zurück zu unserer Seite gehen und neu laden, können
Sie sehen, dass unsere Straßen Schlagzeile und
unsere Credits in die Mitte der Zellen gestoßen sind. Dies ist eine super schnelle Einführung, wie wir
CSS-Rasterregeln verwenden können , um Inhalte in einer Webseite nur mit Spalten zu erstellen. Wir haben noch nicht angefangen, über die Verwendung von Zeilen zu sprechen. Nur eine kurze Zusammenfassung. Um dem Browser mitzuteilen, dass wir CSS-Raster verwenden, müssen
wir die Anzeigeregel eines Containerelements auf Raster setzen. Wir können angeben, wie viele Spalten wir in unserem Raster wollen, indem wir die Regel Grid-Template-Spalten verwenden. Wir können entweder jede Spalte einzeln angeben, oder wir können diese Wiederholungsfunktion verwenden, um anzugeben, wie viele Spalten wir wollen. Um Inhalte in unserem CSS-Grid-Container anzuordnen, können
wir die Justify-self-Regel und die Align-Self-Regel verwenden. Rechtfertigungs-Selbst ist für die Anordnung der Dinge horizontal und Ausrichten-Selbst ist für die vertikale Anordnung. Jetzt hängen Sie fest für die nächste Lektion, wo wir mit unserem Portfolio-Projekt beginnen und wir sehen wie wir Dinge mit Spalten und Zeilen im CSS-Raster anordnen können.
6. So erstellst du ein Layout mit Zeilen und Spalten: Willkommen zurück zu dieser Einführung in CSS Grid , wo wir ein Online-Portfolio mit CSS Grid aufgebaut. Hier definieren wir Zeilen und Spalten und es ist auch, wo wir unser Projekt beginnen. Also, was werden wir in diesem Video abdecken? Wir werden lernen, wie ein Layout
mit einer CSS-Rasterregel namens Grid-Template-Bereiche zu definieren . Dann werden wir einen neuen Regelrasterbereich verwenden, um Elemente in das Layout zu setzen. Das heißt, sie innerhalb des Layouts zu platzieren, das wir mit Rastervorlagenbereichen definiert haben. Wie ich schon sagte, hier werden wir unsere kleine Portfolio-Seite starten
und nur um zu sehen, wie das aussieht. Hier haben wir es genau hier. Dies ist also unsere Beispiel-Portfolio-Seite. Wir haben Landschafts- oder Portraiturstudio-Bild und ein kommerzielles Bild. Offensichtlich können Sie in diesem Bildbereich alles haben, was Sie wollen. Sie können eine kleine Diashow machen. Ich habe gerade ein einzelnes Bild und jedes
dieser Links zu einer separaten HTML-Seite mit genau der gleichen Struktur. Der einzige Unterschied besteht darin, dass jeder ein anderes Bild anzeigt. Wäre viel schöner gewesen,
eine HTML-Seite zu verwenden und vielleicht etwas JavaScript oder etwas zu haben, um zwischen unseren Bildern zu wechseln. Aber um daran zu festhalten, über CSS-Grid zu lernen, habe
ich die Dinge hier so einfach wie möglich gehalten. Das ist also, was wir in dieser Lektion beginnen werden. Das erste, was wir besser auschecken, ist der HTML, der die Seitenstruktur definiert. Los geht's. Hier ist unsere HTML-Seite im Landschaftsformat. Wie ich schon sagte, das Landschaftsporträtstudio und kommerziellen Seiten sind im Grunde alle gleich. Sie werden nur auf einem anderen Bild angezeigt und es gibt nichts zu schockierend hier. Wir haben einen ziemlich Standard HTML Head Abschnitt. Dann kommen wir in den Körper, unser Inhalt ist in einem Hauptelement genau hier oben enthalten. Dann gehen wir in unser H1. Dann haben wir unsere Navigation, das ist unser Portfolio und unsere Navigation. Dann ist dies ein kleines nav Element mit ID Portfolio nav. Das sind IDs, wir werden sehen, warum sie bald wichtig sind. Danach haben wir unser Portfolioelement, das ist die Sache, die auf der Portfolioseite erscheint, und wir verlinken nur auf ein Bild. Wieder aus Kürze habe ich p1.jpg codiert. Dann ein wenig Copyright Ihrer wirklich, Sie setzen Ihren Namen dort hinein. Schließlich am unteren Rand haben wir einige Website-Navigation, die ein
weiteres Stück Navigation mit einer ID Website nav ist , und dann nur einige Links, die zu anderen Teilen der Website gehen würde. Ich habe gerade ein „#“ href hier verwendet, oder ein Pfund. Auch hier, weil dies eine Beispiel-Webseite ist. Wieder einmal werden wir diesen HTML-Code während
dieser Klasse nicht bearbeiten, da wir uns auf das CSS für CSS-Raster konzentrieren. Apropos, was wir auch unsere CSS überprüfen sollten und hier ist es. Ich sollte noch einmal erwähnen, dass ich das HTML, die Bilder und CSS für diese Portfolio-Seite in einer ZIP-Datei namens CSS-Grid-Portfolio, project.zip, habe. Das hat alle HTML, die Sie benötigen, die Bilder und die Datei portfolio.CSS ohne das CSS-Grid-spezifische CSS darin. Das ist für Sie zu füllen, während Sie Ihr Projekt tun. größte Teil der vorhandenen Inhalte hier ist mit Typografie zu tun. Wir haben eine Regel für unsere Bilder, die darin besteht, sie wieder auf
den verfügbaren Platz zu dehnen , den sie haben, wenn sie im Layout platziert werden. Dann ist alles andere so ziemlich einfach nur Text, Stile und Größen zu setzen. Also hat dort nichts Raster zu tun. Jetzt ist es an der Zeit, unsere allererste CSS Grid Style Rule zu implementieren. Genau wie beim letzten Mal werden wir unser enthaltendes Element in
diesem Fall setzen , es ist das Hauptelement in unserem HTML. Wir legen fest, dass eine Anzeigeregel gleich Raster ist. Also hier sind wir in unserem Code, den ich gerade in Hauptanzeige-Raster setzen würde. Bevor wir etwas anderes tun, sollten
wir uns ansehen, wie die Webseite im Moment aussieht. Wir haben uns gerade eine fertige Version angesehen. Mal sehen, wie es ohne unser Gitter-Styling aussieht. Speichern Sie das und los geht's. So sieht es im Moment aus, nicht zu hübsch, obwohl das Foto sehr schön zeigt. Aber so wollen wir nicht, dass es aussieht. Also werde ich das einfach wieder da reinlegen, ihm ein Speichern geben, nachladen und aussehen, hat sich nicht viel geändert. Aber wir werden jetzt wieder den Rest dieses Rasterlayouts implementieren. Das nächste, was wir tun wollen, genau wie das letzte Mal, wenn wir ein paar Spalten einrichten und dieses Mal ist es ein bisschen anders. Wir verwenden unsere eine Brucheinheit
der Seite für eine Spalte und dann drei von ihnen und dann 0,1 von ihnen. Ich weiß nicht über dich, aber ich finde es nicht super einfach , all das
hinzuzufügen und darüber nachzudenken, wie es im eigentlichen Layout herauskommt. Im Grunde habe ich beschlossen, dass
meine Spalten sein sollen und sie dann anpassen, bis sie richtig aussahen. Aber wir werden das jetzt und dann einbringen, wenn wir uns durch dieses Video ein bisschen mehr bewegen, werden
wir in der Lage sein, klarer zu sehen, wie sich das tatsächlich ausbreitet. Also zurück in unserem Code hinzufügen oder noch einmal sagen Grid Template Spalten 1fr, 3fr, 0.1fr. Wie sieht das die Seite aus? Irgendwie wahnsinnig. So sieht es aus. Aber wenn wir in den nächsten Teil dieses Videos gehen, werden
wir sehen, wie wir das alles neu anordnen können, um es so zu gestalten, wie wir es wollen. Hier können wir also beschreiben, wie die Ebene aussehen soll,
und die CSS-Regel, die wir verwenden werden, ist Rastervorlagenbereiche. Dies ist nun eine Möglichkeit, zu definieren, wie Inhalt in Zeilen und Spalten sitzt. Jetzt gibt es viele verschiedene Möglichkeiten, dies im CSS-Raster zu tun. Ich persönlich finde dies die intuitivste Art, darüber nachzudenken, weshalb ich das hier gemacht habe und generell in meiner eigenen Arbeit daran festhalte. Aber das ist der Wert, den wir verwendet haben , dass ich verstehe, dass es wie eine Menge Zeug aussieht. Aber wenn wir darüber hindurchgehen, können
wir sehen, dass es hier drei Saiten gibt. Jede dieser Zeichenfolgen stellt eine Zeile dar. Also haben wir Header, Header, das ist die erste Zeile, und dann Portfolio-Nav, Portfolio-Element, das ist die zweite Zeile, und dann Portfolio nav und Website nav, das ist die dritte Zeile. Also mal sehen, wie das wirklich aussieht. Wenn wir dieses große graue Rechteck hier haben, tun Sie so, als wäre das unsere Webseite. Wenn wir uns unsere Spalten nochmals ansehen, können
wir sehen, dass unsere erste Spalte
ungefähr ein bisschen weniger als ein Viertel der linken Seite einnimmt . Dann haben wir fast drei Viertel in der Mitte aufgenommen. Dann auf der rechten Seite, wir haben die 0.1fr. Das ist eine winzige kleine Spalte über dem anderen Ende dort, und das verwende ich als ein bisschen Daten auf dieser anderen Seite. So sehen unsere Spalten aus, aber lassen Sie uns sehen, wie unser Inhalt mit diesem Gittervorlagenbereichs-Wert ausgelegt werden kann. Noch einmal, als Referenz, hier ist dieser Wert und wir werden ihn einfach in der unteren Ecke dort ploppen. Wenn Sie sich die erste Zeile ansehen, wenn sich etwas zweimal oder mehr als einmal wiederholt, bedeutet dies, dass sie sich entweder über Spalten oder Zeilen erstreckt. Wir haben hier einen Header, der in der ersten Zeile erscheint, und das bedeutet, dass es zwei Spalten besetzen wird. Dann haben wir portfolio-nav und dann portfolio-item. Wir können sehen, dass wir gesagt haben, okay, portfolio-nav wird die erste Spalte aufnehmen und dann portfolio-item wird die zweite Spalte herausnehmen. Wenn wir dann in die dritte Reihe kommen, haben
wir wieder Portfolio-nav und wir können sehen, dass es sich über Zeilen erstreckt. Dann endlich, um das letzte Bit dieser Zeile und Spalte zu füllen, haben
wir unser Standort-nav. Nun, wie ich bereits sagte, gibt es verschiedene Möglichkeiten im CSS-Raster, dass wir
Zeilen und Spalten definieren können und wie Elemente sich über sie erstrecken; wie sie den Raum zwischen diesen Zeilen und Spalten füllen. Wie gesagt, finde ich dies die intuitivste und unkomplizierteste Art, sie auszudrücken und zu verstehen. Das nächste, was wir tun sollten, ist, diesen Code in unser CSS zu setzen. Wenn Sie zu Hause mit Ihrer Startup-CSS-Datei spielen, setzen Sie das
bitte auch hier ein. Wir machen Inline nur aus Gründen der Klarheit, wirklich. Portfolio-NAV gefolgt von portfolio-item und einer weiteren neuen Zeile. Dann portfolio-nav gefolgt von site-nav. Das ist alles gut und gut. Aber wie setzen wir die Dinge da rein? Sagen wir, wir wollen, dass dieser Teil
der Seite in die erste Zeile geht und zwei Spalten umfasst und dann wollen wir, dass der nächste Teil hier passt, dann der nächste Teil daneben. So machen wir es. Ersetzen Sie Elemente im Layout mithilfe dieser Gitterbereich-CSS-Regel. Diese Werte beziehen sich direkt auf die Werte in unseren Rastervorlagenbereichen. Siehst du, wir haben hier eine Kopfzeile. Lassen Sie mich hier rüber gehen und hier ist noch einmal Header und beachten Sie, dass es keine Anführungszeichen um ihn herum hat, was ganz anders ist. Es ist, als hätten wir ein neues reserviertes CSS-Wort erstellt, aber wir haben es nicht. Wir haben gerade einen Namen zu einem Abschnitt
unseres Layouts gegeben , den wir später verwenden, und wir werden es mit Grid-Bereich verwenden. Was wir tun werden, ist ein paar
davon zu definieren und sie alle beziehen sich auf die Werte in Rastervorlagenbereichen zurück. Was wir tun, ist, dass wir in unseren Code gehen, wo wir hier sind. Dann sagen wir, wir wollten, dass H1
einen Rasterbereichswert von Header hat. Wenn Sie hier oben sehr deutlich sehen können, dass wir nicht sagen, wollen
wir, dass unser H1 sich über zwei Spalten erstreckt. Dann, wenn Sie sich erinnern, in unserem HTML, haben
wir diese verschiedenen Elemente: nav mit Portfolio und ID von portfolio-nav und dann ein div mit einer ID von portfolio-item und einer ID von site-nav für diesen. Sie können sehen, dass sie sich auf die Werte beziehen, die in Rastervorlagenbereichen verwendet werden. Das müssen wir nicht tun. Ich habe ihnen gerade den gleichen Namen gegeben, um Klarheit zu geben, und um uns zu helfen, zu verstehen, wie sie miteinander in Beziehung stehen. Wir können ihnen jeden Namen geben, den wir mögen, und dann können wir sie im CSS zusammenstellen und das CSS-Rasterlayout wird sie an der entsprechenden Stelle platzieren. Wir sagen portfolio-nav Element, wir sagen Grid-Bereich Portfolio-nav und dann, natürlich, wir sagen portfolio-item. Dann schließlich nimmt unser Standort-nav eine Rasterfläche von Standort-nav. Jetzt können wir das speichern und einen Blick darauf werfen, wie es funktioniert auf unserer Webseite. Hier ist unsere Webseite, wie wir sie zuletzt gesehen haben, eine ziemlich, traurige Seite. Wenn ich nachlade, siehst du, dass es viel besser aussieht. Es ist noch nicht der ganze Weg dorthin, aber wir können sehen, dass unsere Seite viel näher an dem ist, was wir wollen. Darüber hinaus können wir sehen, dass es gemäß dieser CSS-Regel Rastervorlagenbereiche angelegt wurde. Wir haben unser Portfolio. Man kann nicht wirklich sehen, dass es den ganzen Weg hier rüber spannt, aber es ist. Dann haben wir unsere Portfolio-Navigation auf die Seite und dann unser Portfolio Artikel auf der rechten Seite hier. Dann endlich haben wir unsere Website-Navigation versteckt darunter. Sie können sehen, wie wir unsere CSS-Regel für Rastervorlagenbereiche verwendet haben, um ein Layout zu beschreiben und
wie wir dann die CSS-Regel für Rasterbereich verwendet haben, um einzelne Elemente innerhalb dieses Layers zu platzieren. Jetzt sitzen Sie fest für das nächste Video, wo wir unsere Inhalte ein wenig schöner in unserem Layout
arrangieren werden.
7. Inhalt in Rasterspalten positionieren: Ok. Willkommen zurück zu unserem Introduction to CSS Grid. Jetzt ist es an der Zeit, einige dieser Elemente in
unserem Layout zu positionieren , weil wir das und Dinge hier sehen können, die nicht ganz richtig sind. Wir wollen unseren Portfolio-Header nicht den ganzen Weg hier drüben. Wir wollen es nach rechts,
und die Navigation hier für die verschiedenen Portfoliostücke sollte hier in der Mitte gemacht werden, anstatt nach oben zu schieben, wo es jetzt ist. Das ist es, was wir in diesem Video beheben werden. Was werden wir uns ansehen? Etwas, das wir bereits behandelt haben, das ist die Rechtfertigungs-Selbst-Regel und Align-Selbst-Regeln. Wir machen auch etwas Platz in unserem Layout mit der Gitterlücken-CSS-Rasterregel. Das erste, was wir tun wollen, ist, unsere h1 ganz nach rechts zu schieben, und wir werden das mit der Rechtfertigung Selbst-Regel auf den Wert gesetzt, richtig. Hier sind wir in unserem Code und wir werden das gerade jetzt rechtfertigen Selbst, richtig. Speichern Sie das. Geben Sie dieser Seite einen Neuladen, und wir können sagen, dass unser Portfolio-Header den ganzen Weg nach rechts gesprungen ist. Als Nächstes wollen wir unsere Portfolio-Navigation reparieren. Für unser Portfolio nav ID für unser Element wollen
wir ihm den Align-self-Wert des
Zentrums geben , der eine Möglichkeit ist, es vertikal in der Mitte auszurichten. Hier ist unser Portfolio nav CSS, und wir können ausrichten selbst sagen, Zentrum. Wenn wir unserer Seite ein Reload geben, da gehen wir, setzt unsere Portfolio-Navigation in die Mitte. Wir können sagen, dass unsere Seite beginnt zu schauen und zu arbeiten, wie wir wollen. Aber es gibt noch eine Sache, die wir tun möchten, nämlich eine Lücke zwischen unseren Zeilen und Spalten zu schaffen, und wir werden diesem einen Wert von 1em geben. Dies gilt auch für das Hauptelement, und dies ist das übergeordnete Element für unser CSS-Raster. Das ist das Element, das das Gitter enthält. Es ist, wo wir sagen, Anzeigeraster, und es ist, wo wir die Rastervorlagenbereiche zuweisen. Wir tun es hier, weil dies etwas ist, das
das Verhalten des gesamten Rasterlayouts beeinflusst . Wir werden sagen, Gitterlücke 1em. Dies wirkt sich nun auf Zeilen und Spalten aus. Jetzt haben wir Grid-Zeilen-Lücke und wir haben auch Gitter-Spalten-Lücke. Nun können diese Regeln verwendet werden, um unterschiedliche Werte für die Lücken zwischen Zeilen und Spalten
anzugeben. Aber weil ich den gleichen Wert für die Lücke zwischen den Zeilen und Spalten möchte, kann
ich einfach Gitterlücke als Abkürzung verwenden. Ich werde das speichern und unseren Browser aktualisieren, und Sie können sehen, dass wir einfach etwas Platz zwischen alles gelegt haben. Es könnte mehr Platz zwischen unserem Bild und dem Portfolio, dem Header und der Navigation am unteren Rand geben, und es kommt nur ein wenig und macht etwas mehr Platz in unserem Layout. Das ist so ziemlich alles, was wir mit dieser Seite in ihrer aktuellen Form machen wollen. Wenn wir jedoch aus unserem Vollbildmodus hier kommen, und ich schnappe diesen Kerl und fange an, es ein bisschen kleiner und kleiner
und kleiner zu machen , können
Sie sehen, dass dies nicht wirklich ein mobil-freundliches Layout ist. Das nächste, was wir tun werden, ist
unser CSS zu aktualisieren , um es auf die Größe des Browsers reagieren zu lassen, so dass es ein Layout zeigt, das für
mobile Geräte geeignet ist , wenn der Browser so klein ist.
8. Wie du eine responsive Version des CSS Grid-Projekt erstellst.: Okay, willkommen zurück zu Einführung in CSS Grid. In diesem Video werden wir uns ansehen, wie wir
unser Rasterlayout reagieren können . Was heißt, wie können wir es sowohl in Desktop- als auch in
mobilen Browsern gut anzeigen lassen ? Was werden wir uns jetzt ansehen? Wir werden sehen, wie wir CSS-Medienabfragen verwenden können, und die Rastervorlagenbereiche CSS Regel zusammen, um verschiedene Layouts in verschiedenen Browsern zu
zeigen. Wie werden wir das tun? Nun, was wir tun, ist, dass wir unsere Rastervorlagenspalten und Rastervorlagenbereiche,
CSS-Regeln neu definieren , so dass wir im Grunde nur eine Spalte haben und dann alle unsere verschiedenen Bereiche anlegen, übereinander, was ziemlich nah an der normalen Art und Weise, wie die Dinge angelegt sind. Aber das ist ein Weg, dass wir unsere Grid-Vorlage verwenden können, um
unsere Elemente neu anzuordnen , wenn der Browser größer oder kleiner ist.Hier
sind wir in unserem Code und ich werde direkt nach unten stoßen und
eine Medienabfrage erstellen.Nehmen wir an, 600 Pixel. Das kann unser richtiger Punkt sein und jetzt, was ich tun werde, ist unser CSS auf
ein mobiles Display einzurichten , und dann, wenn unser Browser eine maximale Größe größer als 600 Pixel hat, dann können wir ein Desktop-Layout haben.Ich werde Desktop Layout und ich werde das packen und das dort unten legen, wir wollen, dass das im Hauptelement ist. Dies ist für Desktop und nur einen kleinen Kommentar in gie.You erinnern.Fein und dann gehen wir zurück
zu unserem Gittervorlagenspalten und Rastervorlagenbereiche und sagen, gut, wir wollen nur eine Spalte jetzt dank einfach so und dann werden wir sagen, wir haben unsere Kopfzeile. Dann haben wir unsere Portfolio-Navigation, dann haben wir unser Portfolio-Element und dann haben wir unser Site-Nav unten. Mal sehen, wie das in unserem Browser aussieht. Ich werde unserem Browser einen Neuladen geben und wir können sehen, dass wir immer noch so ziemlich in der Art, wie wir es für unser Desktop-Layout erwarten würden, und wie ich dies kleiner mache, können
Sie sehen, es wechselt herum und wir können sehen, unser Portfolio ist an der Spitze. Wir haben unsere Landschaft, Porträt, Studio und kommerzielle Links sitzen dort. Dann haben wir jetzt unser Standort-nav unten. Ich denke, dieser Text ist ein wenig klein für ein mobiles Gerät, also werde ich das jetzt beheben. Ich werde unsere Schriftgröße auf zwei Einheiten der
Ansichtsbreite ändern.Lassen Sie uns das in unserer Medienabfrage setzen, zurück zu einem dort und ich denke, ich möchte, dass unser Header
für ein Handy zentriert wird . Ich denke, wir sagen, Mitte und dann gehen wir Hier unten und wir werden das in gibt.Für unseren Desktop haben wir immer noch unsere ein, zwei, drei Spalten. Wir haben einen Header, der die erste Reihe umfasst, und wir haben unsere Portfolio-nav und Portfolio-Artikel und das Portfolio-nav das
sich bis zum dritten Zeile und dann unsere Website-Navigation, und dann haben wir gesagt, unser Header würde
nach rechts ausgerichtet sein und wir werden eine kleinere Schriftgröße haben. Aber außerhalb der Desktop-Definitionen. Wir haben eine Spalte, sorry, und dann jedes Element sitzt in seiner eigenen Reihe und wir haben
alles zentriert . Mal sehen, wie das in
unserem Browser aussieht und jetzt werde ich das neu laden und wir sind fertig. Wir haben jetzt größeren Text für unser mobiles Layout, aber wir haben alles, was
dort gut passt und es sieht nicht zu quashy.Natürlich, wenn wir wieder ausdehnen, geht
alles zurück zu der Art, wie wir es ursprünglich entworfen haben. Das ist, wie wir eine Portfolio-Web-Seite mit CSS-Grid implementieren können.
9. unsere Einführung in CSS Rad sammeln: Nun, das ist das Ende unserer Einführung in das CSS-Grid. Ich hoffe wirklich, Sie haben es genossen und fanden es auch nützlich. Während dieser Klasse haben wir gelernt, was CSS Grid ist, wie wir es verwenden können, um Zeilen und Spalten in einem Web-Layout zu definieren, wie wir Inhalte in unseren Zeilen und Spalten positionieren können, und schließlich, wie wir unser Layout auf Desktop und Mobile gut aussehen lassen -Geräten. Nun, wenn Sie es noch nicht getan haben, wäre
jetzt ein guter Zeitpunkt, um Ihr Projekt in der Projekt-Galerie zu posten. Dies ist eine großartige Möglichkeit, Feedback zu erhalten und auch Ihre erstaunliche Arbeit den anderen Schülern zu
zeigen. Ich hoffe noch einmal, dass Sie diese Klasse nützlich
und genossen haben und ich freue mich darauf, Sie beim nächsten Mal zu sehen.