Erstellen Sie einen Blog mit Grid und Flexbox

Sep 17, 2025

wie man

Die letzten zwei bis drei Jahre haben gesehen, dass Layout in Sprünge und Grenzen vorankommen. Nachdem diese modernen Techniken in modernen Browsern ein solches konsistentes Ergebnis haben, können Sie sie wirklich für Ihren Produktionscode verwenden. Wenn Sie sich fragen So starten Sie einen Blog Dieses Tutorial zeigt Ihnen, wie einfach, wie einfach es ist, ein Standard-Blog-Stil-Layout mit CSS-Grid und Flexible Box-Modul, AKA FLEXBOX, erstellen soll. Klingt wie zu viel harte Arbeit für das, was du willst? Schauen Sie sich unseren Führer an Beste kostenlose Blogging-Plattformen oder wählen Sie ein Top Webseitenersteller . Mit einem Team arbeiten? Das Beste bereitstellen Cloud-Speicherung. um den Prozess glatt zu halten.

Lassen Sie uns zunächst schnell über die Grundlagen von HTML ummitteln und warum es gut ist, einen semantischen Code zu schreiben und zu schreiben.

Mehr als Desktop und Mobile

Haben Sie den Lesermodus auf Safari und Firefox bemerkt? Es ist ein Symbol in der Adressleiste, das ein wenig wie gesäumtes Papier aussieht. Das wird deine rendern Website-Layout. In einem ablenkungsfreien, bloßen Knochenmodus, eher wie Geräte wie die Apple-Uhren Verwendung. Immer mehr Geräte zugreifen und zeigen Webinhalte - möglicherweise war der große Hit von Weihnachten interaktive Lautsprecher wie das Amazon-Echo.

Im Sinn, und natürlich muss der Bedarf an Ihrer Website an Bildschirmlesen und dergleichen die Struktur Ihrer Seite von entscheidender Bedeutung sein. Wenn Sie nur verwenden & lt; div & gt; Für alle Ihre Container und sogar Tasten werden dann die Geräte, die Ihren Code ergeben, nicht wissen, was der Kontext ist, und kann keine der nativen Funktionalität oder Funktionen verwenden.

01. Starten Sie das grundlegende Seitenlayout

Wir werden eine grundlegende Webseite aufbauen, um einen Header mit der Navigation, einem Heldenblock, einem Hauptartikel, aufgebauten Artikelblöcken und einer Fußzeile aufzunehmen. Die Idee hier ist, viele zu sehen sich anpassendes Webdesign Techniken Wir können ohne Medienabfragen oder assistives JavaScript implementieren. Sie können sehen, dass das HTML der Seite mit HTML5-Tags in verschiedene Abschnitte aufgeteilt ist. Wir fügen ihnen auch Klassen hinzu, da ältere Browser nicht wissen, was sie sind, und rendern sie als div. Beginnen wir am oberen Rand der Seite und arbeiten Sie unseren Weg durch. Allerdings beinhalten oder komplex Ihre Website, es ist auch Zeit, darüber nachzudenken Web-Hosting Der Service ist richtig für Sie.

02. Bauen Sie einen Site-Header auf

Build a blog with Grid and flexbox: Site header — Sie benötigen keine Wrapper oder Container für diesen Header

Der Header der Site enthält ein Logo und eine ungeordnete Liste für die Navigation. Wir müssen keine Wrapper oder Container hinzufügen, um dies mit dem Logo nach links und der Navigation nach rechts in einer einzigen Zeile zu legen.

 & lt; Header-Klasse = "Header" & GT;

& lt; img src = "Bilder / logo.png" / & gt;
& lt; nav & gt;
& lt; ul Class = "NAV" & GT;
& lt; li & gt; & lt; ein href = "#"
Klasse = "aktiv" & gt; Haus & lt; / a & gt; & lt; / li & gt;
~ ein href = "#" & gt; über & lt; / a & gt; & lt; / lt; / lt;
ein href = "#" & lt; die Hunde & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; contact & lt; / a & gt; & lt; / lt; / lt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; / header & gt;

03. Verwenden Sie die FR-Einheit

Wir stellen den Header ein, um das Raster anzuzeigen, und verwenden Sie dann 'Get-Template-Säulen' Um zwei Spalten in den Kopfzeilen zu setzen. Wir nehmen das Fr Einheit hier, bei der eine fraktionale Einheit ist - 1Fr würde dem verfügbaren Raum im Behälter gleich sein. In diesem Fall geben wir die Navigation einen etwas kleineren Bereich zum Füllen.

 Header {
Anzeige: Gitter;
Grid-Template-Säulen: 1,5FR 1Fr;
Ausrichten-Gegenstände: Zentrum;
}

04. Site-Navigation hinzufügen

Jetzt zielen wir auf die Liste der Menüelemente aus. Wieder drehen wir das & lt; ul & gt; in einen Gitterbehälter und teilen Sie den Gegenständen in die Autofit in Spalten an. Hier benutzen wir. Minimal Maximal Um sicherzustellen, dass die Spalten niemals kleiner als 100px sein können, aber wenn der Speicherplatz größer ist, können sie den Speicherplatz als 1FR teilen.

 .NAV {
Anzeige: Gitter;
Grid-Template-Spalten: Wiederholen (Auto-Fit, Minmax (100px, 1Fr));
Gitterlücke: 10px;
Ausrichten-Gegenstände: Zentrum;
}

05. Heldenblock erstellen

Build a blog with Grid and flexbox: Hero block — Das Zentrieren des Heldentextes ist mit CSS-Raster oder Flex viel einfacher

Der nächste Teil der Seite ist der Hauptheldblock. Traditionell senkrecht zentrierender Text in einem Container benötigte alle möglichen Worten. Mit CSS-Raster oder Flex ist dies wirklich einfach.

 & lt; Artikel & GT;
& lt; Abschnittsklasse = "Held" & gt;
& h1 & gt; & lt; / h1 & gt;
& lt; p & gt; & lt; / p & gt;
& lt; ein href = "" & gt; & lt; / a & gt;
& lt; / ordnung & gt;
& lt; / article & gt;

06. Richten Sie an der Mitte aus

Die Ausrichtung auf zwei Achsen ist ein Teil des Brotes und Butters von CSS-Gitter. Hier können wir den Heldenbehälter in einen Gitterbehälter verwandeln und dann verwenden Richten-Inhalt (links nach rechts) und rechtfertiger Inhalt (bis zu Boden) in der Mitte. Wir verwenden eine VH. Einheit hier, der den Helden 50% der Ansichtsfensterhöhe blockiert.

 .hero {
MIN-HÖHE: 50VH;
Anzeige: Gitter;
rechtfertige Gegenstände: Zentrum;
Richten-Inhalt: Center;
Rechtfertigungsinhalt: Center;
}

07. Erstellen Sie den Abschnitt des Hauptinhalts

Der Hauptartikel hat auch einen Block nach rechts, der weitere Lesen enthält. Um dies ansprechbar zu machen, ohne eine Medienabfrage nutzen zu müssen, können wir auf FlexBox wechseln, um die meisten Eigenschaften zu nutzen.

 & lt; Artikel-Klasse = "Hauptinhalt" & GT;
& lt; Abschnitt / & gt;
& lt; / ordnung & gt;
& lt; beiseite / & gt;
& lt; / article & gt;

08. Fügen Sie eine Zweispaltenansicht hinzu

Stellen Sie den Artikel in einen Flexcontainer ein. Fügen Sie links und rechts ein wenig Polsterung hinzu, um sicherzustellen, dass das Kennwert des Textes nicht zu lang wird. Die Flexrichtung ist Zeile, so dass der Abschnitt und beiseite nebeneinander sitzen, wenn sie sich nebeneinander befinden. Der Inhalt ist mit dem Raum gerechtfertigt, da der Text nicht an der Seite berührt.

 Hauptinhalt {
Anzeige: Flex;
Flex-Wrap: Wrap;
Flex-Richtung: Reihe;
Rechtfertigungsinhalt: Raum zwischen;
Polsterung: 0 5VW 0 5VW;}

09. Machen Sie es ohne Medienabfragen reagieren

Build a blog with Grid and flexbox: Responsive without media queries — Erstellen Sie einen ansprechenden Abschnitt, ohne Medienabfragen verwenden zu müssen

Der Abschnitt verwendet eine clevere Mischung aus Calc- und Minimum- und Maximalbreiten, um uns zu geben, was effektiv eine Medienabfrage ist, sondern auf einem Containerebene. Wenn genügend Raum vorhanden ist, nimmt der Abschnitt 70% des Elternteils auf, wodurch die Abgesehen von ihm sitzen kann. Durch die Verwendung von Calc für die Breite können wir entweder eine riesige oder winzige Breite zurückgeben.

 Hauptinhaltsabschnitt {
Min-Breite: 70%;
Breite: Calc ((48em - 100%) * 1000);
Max-Breite: 100%;
}

10. Definieren Sie einen Break Point

48EM entspricht 768px (48 * Basisfontgröße (16px)), so dass über 768px der Abschnitt seine Mindestbreite von 70% und unter 768 ist, dass die maximale Breite verwendet wird. Wir tun das Gleiche für die Abgesehen davon, so dass in diesem Fall entweder 25% auf große Bildschirme oder zu 100% auf klein werden. Der Effekt ist ein ansprechender Pausenpunkt, der den Behälter reinwirkt.

 .Main-Inhalt beiseite {
Min-Breite: 25%;
Breite: Calc ((48em - 100%) * 1000);
Max-Breite: 100%;
}

11. Bauen Sie ansprechende Blöcke auf

Build a blog with Grid and flexbox: Responsive blocks — Verwenden Sie Container-DIVS, um Ihre ansprechenden Blöcke aufzubauen

Um die vorgestellten Elemente zu erstellen, die auf der Seite ausgeführt werden, verwenden wir endlich unsere ersten Container-DIVS.

 & lt; Abschnittsklasse = "Kartenliste" & GT;
& lt; div class = "card" & gt;
& lt; img / & gt;
& lt; div class = "card-details" & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / ordnung & gt;

12. wiederholen und autofit

Für unsere Kartenliste möchten wir vier in einer Reihe haben, aber weil wir keine Medienabfragen verwenden, die wir unseren Minimal Maximal Wert auf 300px, der auf ein kleines Mobiltelefon hübsch passt. Durch die Verwendung von Wiederholungs- und Autofit tätigt der Browser die harte Arbeit und passt, was er in eine Zeile kann, und starten Sie dann einen anderen, sodass wir von vier bis zu einem einzigen Spaltenlayout mit einer Codezeile gehen können.

 .card-list {
Anzeige: Gitter;
Gitterlücke: 10px;
Grid-Template-Spalten: Wiederholen (Auto-Fit,
Minmax (300px, 1Fr));
}

.card {
 Anzeige: Gitter;
 Grid-Template-Säulen: 1fr;
}

13. Erstellen Sie ein Kartenlayout

Für die Details in der Karte wechseln wir zurück, um den Fluss in die Säule zu setzen, sodass die Elemente vertikal fließen. Setze das ein rechtfertiger Inhalt Eigentum zu passen - in diesem Fall Platz gleichmäßig funktioniert gut. Da das Tag 'A' in diesem Panel Block zeigt, würde es die Breite des Behälters dehnen. Setzen Sie es auf Flex-Start damit er nur den Raum seines Inhalts aufnimmt.

.Kartendetails {
Anzeige: Flex;
Flex-Richtung: Säule;
Rechtfertigungsinhalt: Raum gleichmäßig;
}

.card-Detail A {
Ausrichten-Self: Flex-Start;
}

14. Stil die Fußzeile

Wir sind bereits an der Fußzeile, und verwenden nur einige der von uns verwendeten Styles, die wir früher benutzt haben, um es herauszulegen.

 & lt; Fußzeileklasse = "Fußzeile" & GT;
& lt; p / & gt;
& lt; nav & gt;
& lt; ul Class = "NAV" & GT;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; ul class = "sozial" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / founder & gt;

15. Richten Sie den untergeordneten Artikel aus

Es gibt drei Bereiche in dieser Fußzeile. Stellen Sie Ihre Gittersäulen ein, um drei bei jeweils drei Fraktion zu wiederholen. Sie können nur 'Grid-Template-Säulen: 1Fr 1Fr 1Fr 1Fr;' schreiben Wenn Sie möchten. Die sozialen Symbole werden auf der rechten Seite sitzen - Sie können dies tun, indem Sie dem Artikel selbst sagen, um die richtige Verwendung von richtig auszurichten rechtfertiges Selbst .

 .footer {
Anzeige: Gitter;
Grid-Template-Säulen: Wiederholen (3, 1Fr);
Grid-Auto-Flow: Säule;
Ausrichten-Gegenstände: Zentrum;
}

.Sozial {
rechtfertigen - selbst: ende;
}

16. Beachten Sie die Kompatibilität

Obwohl dieses Tutorial über den großen drei Browsern und modernen Geräten gut funktioniert, wurde es nicht wieder auf IE getestet. Je nach Projekt können Sie progressive Verbesserungen verwenden und ein einfaches Layout servieren. Wenn Ihr CSS mit einem Präprozessor wie SASS erstellt wird, bietet das Autoprefixer-Paket einige der zusätzlichen Präfixe, die für den Rand gefällt.

Dieser Artikel wurde ursprünglich in Ausgabe 284 des kreativen Webdesign-Magazins veröffentlicht Webdesigner . AUSGABEN 284 HIER KAUFEN oder Abonnieren Sie den Webdesigner hier .

Zum Thema passende Artikel:

Eine umfassende Anleitung zur Verwendung von CSS-Raster
Verwenden Sie CSS Grid und FlexBox, um eine ansprechende Schnittstelle zu erstellen
5 coole CSS-Gittergeneratoren

Erstellen Sie einen Blog mit Grid und Flexbox

Mehr als Desktop und Mobile

01. Starten Sie das grundlegende Seitenlayout

02. Bauen Sie einen Site-Header auf

03. Verwenden Sie die FR-Einheit

04. Site-Navigation hinzufügen

05. Heldenblock erstellen

06. Richten Sie an der Mitte aus

07. Erstellen Sie den Abschnitt des Hauptinhalts

08. Fügen Sie eine Zweispaltenansicht hinzu

09. Machen Sie es ohne Medienabfragen reagieren

10. Definieren Sie einen Break Point

11. Bauen Sie ansprechende Blöcke auf

12. wiederholen und autofit

13. Erstellen Sie ein Kartenlayout

14. Stil die Fußzeile

15. Richten Sie den untergeordneten Artikel aus

16. Beachten Sie die Kompatibilität

wie man - Die beliebtesten Artikel

Wie zeichnet man einen Hund

10 Möglichkeiten, bessere 3D-Weltumgebungen aufzubauen

So erstellen Sie digitale Plein-Luftbilder

Erstellen Sie Wolken mit FUMEFX für 3ds max.

So erstellen Sie eine photorealistische Raumszene

Farbe kräuselt Wasser in Ölen

Wiederaufbau einer 2004-Flash-Website für 2018

Beschleunigen Sie Ihren Textur-Workflow

Kategorien