Erstellen Sie ein Blog mit Grid und Flexbox

Erstellen Sie ein Blog mit Grid und Flexbox

In den letzten zwei bis drei Jahren hat sich das Layout sprunghaft weiterentwickelt. Jetzt, da diese modernen Techniken in modernen Browsern ein so konsistentes Ergebnis erzielen, können Sie sie wirklich für Ihren Produktionscode verwenden. Wenn Sie sich fragen wie man ein Blog startet Dieses Tutorial zeigt Ihnen, wie einfach es ist, ein Standardlayout im Blog-Stil mit CSS Grid und Flexible Box Module, auch bekannt als Flexbox, zu erstellen. Klingt nach zu viel harter Arbeit für das, was Sie wollen? Schauen Sie sich unseren Leitfaden zum an beste kostenlose Blogging-Plattformen oder wählen Sie ein Top Webseitenersteller . Mit einem Team arbeiten? Stellen Sie das Beste bereit Cloud-Speicher um den Prozess reibungslos zu halten.

Lassen Sie uns zunächst kurz die Grundlagen von HTML zusammenfassen und erläutern, warum es sinnvoll ist, semantischen Code zu schreiben.

Mehr als Desktop und Mobile

Haben Sie den Lesemodus in Safari und Firefox bemerkt? Es ist ein Symbol in der Adressleiste, das ein bisschen wie liniertes Papier aussieht. Dies wird Ihre rendern Website-Layout in einem ablenkungsfreien Bare-Bones-Modus, ähnlich wie Geräte wie die Apple Watch. Immer mehr Geräte greifen auf Webinhalte zu und zeigen diese an - möglicherweise waren interaktive Lautsprecher wie das Amazon Echo der große Erfolg von Weihnachten.



Vor diesem Hintergrund und natürlich der Notwendigkeit, dass Ihre Website auf Bildschirmleseprogrammen und dergleichen funktioniert, ist die Struktur Ihrer Seite von entscheidender Bedeutung. Wenn Sie nur verwenden Für alle Ihre Container und sogar Schaltflächen wissen die Geräte, die Ihren Code rendern, nicht, in welchem ​​Kontext sie sich befinden, und können daher keine der nativen Funktionen oder Merkmale verwenden.

01. Grundlegendes Seitenlayout starten

Wir werden eine einfache Webseite erstellen, die eine Kopfzeile mit Navigation, einen Heldenblock, einen Hauptartikel, Artikelblöcke und eine Fußzeile enthält. Die Idee hier ist, viele zu sehen sich anpassendes Webdesign Techniken, die wir implementieren können, ohne Medienabfragen oder unterstützendes JavaScript zu verwenden. Sie können sehen, dass der HTML-Code der Seite mithilfe von HTML5-Tags in verschiedene Abschnitte unterteilt ist. Wir fügen ihnen auch Klassen hinzu, da ältere Browser nicht wissen, was sie sind, und sie als div rendern. Beginnen wir oben auf der Seite und arbeiten uns durch. Egal wie einfach oder komplex Ihre Website ist, es ist auch Zeit darüber nachzudenken, welche Web-Hosting Service ist das Richtige für Sie.

02. Erstellen Sie einen Site-Header

Erstellen Sie ein Blog mit Grid und Flexbox: Site-Header

bester Computer für 3D-Modellierung und Rendering
Für diesen Header benötigen Sie keine Wrapper oder Container

Die Kopfzeile 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 links und der Navigation rechts in einer einzigen Zeile darzustellen.

03. Verwenden Sie die fr-Einheit

Wir setzen den Header so, dass das Raster angezeigt wird, und verwenden ihn dann 'get-template-Spalten' um zwei Spalten in der Kopfzeile zu setzen. Wir nehmen das fr Einheit hier, die eine gebrochene Einheit ist - 1fr würde dem verfügbaren Platz im Container entsprechen. In diesem Fall geben wir der Navigation einen etwas kleineren Bereich zum Füllen.

header { display:grid; grid-template-columns: 1.5fr 1fr; align-items: center; }

04. Site-Navigation hinzufügen

Jetzt zielen wir auf die Liste der Menüpunkte. Wieder drehen wir die

    in einen Rastercontainer und weisen Sie die darin enthaltenen Elemente an, automatisch in Spalten zu passen. Hier verwenden wir Minimal Maximal um sicherzustellen, dass die Spalten niemals kleiner als 100 Pixel sein können, aber wenn der Speicherplatz größer ist, können sie den Speicherplatz jeweils als 1fr teilen.

    .nav { display:grid; grid-template-columns: repeat(auto-fit, minmax(100px , 1fr)); grid-gap:10px; align-items: center; }

    05. Erstelle einen Heldenblock

    Erstellen Sie ein Blog mit Grid und Flexbox: Hero Block

    Das Zentrieren des Heldentextes ist mit CSS Grid oder Flex viel einfacher

    Der nächste Teil der Seite ist der Hauptheldenblock. Traditionell erforderte das vertikale Vertikalzentrieren von Text in einem Container alle möglichen Umgehungen. Mit CSS Grid oder Flex ist dies ganz einfach.

    Was ist Kopie CSS in Photoshop

    06. Zur Mitte ausrichten

    Das Ausrichten auf zwei Achsen ist ein Teil des Brot und der Butter von CSS Grid. Hier können wir den Heldencontainer in einen Gittercontainer verwandeln und dann verwenden Inhalt ausrichten (von links nach rechts) und Inhalt rechtfertigen (von oben nach unten) in der Mitte positionieren. Wir verwenden eine vh Einheit hier, wodurch der Held 50% der Höhe des Ansichtsfensters blockiert.

    .hero { min-height: 50vh; display:grid; justify-items: center; align-content: center; justify-content: center; }

    07. Erstellen Sie den Hauptinhaltsbereich

    Der Hauptartikel hat auch einen Block rechts, der weitere Informationen enthält. Um dies reaktionsschnell zu gestalten, ohne eine Medienabfrage verwenden zu müssen, können wir zu Flexbox wechseln, um die Eigenschaften optimal zu nutzen.

    08. Fügen Sie eine zweispaltige Ansicht hinzu

    Stellen Sie den Artikel auf einen flexiblen Behälter. Fügen Sie links und rechts einen kleinen Abstand hinzu, um sicherzustellen, dass das Textmaß nicht zu lang wird. Die Flexrichtung ist reihenweise, so dass der Abschnitt und die Innenseite beim Stylen nebeneinander sitzen. Der Inhalt ist auf einen Abstand dazwischen ausgerichtet, damit der Text nicht an der Seite nachbessert.



    main-content { display: flex; flex-wrap: wrap; flex-direction: row; justify-content:space-between; padding: 0 5vw 0 5vw;}

    09. Reagieren Sie ohne Medienabfragen

    Erstellen Sie ein Blog mit Grid und Flexbox: Responsive ohne Medienabfragen

    Erstellen Sie einen reaktionsschnellen Abschnitt, ohne Medienabfragen verwenden zu müssen

    Der Abschnitt verwendet eine clevere Mischung aus Berechnung und minimaler und maximaler Breite, um uns eine effektive Medienabfrage zu geben, jedoch auf Containerebene. Wenn genügend Platz vorhanden ist, nimmt der Bereich 70% des Elternteils ein, sodass die Seite daneben sitzen kann. Wenn Sie calc für die Breite verwenden, können Sie entweder eine große oder eine kleine Breite zurückgeben.

    Das neue Kia-Logo sieht aus wie Lexus
    main-content section { min-width: 70%; width: calc((48em - 100%) * 1000); max-width: 100%; }

    10. Definieren Sie einen Haltepunkt

    48em entspricht 768px (48 * Basisschriftgröße (16px)). Ab 768px entspricht der Abschnitt also einer Mindestbreite von 70% und unter 768 wird die maximale Breite verwendet. Abgesehen davon machen wir dasselbe. In diesem Fall wird es entweder 25% auf großen Bildschirmen oder 100% auf kleinen Bildschirmen beanspruchen. Der Effekt ist ein ansprechender Haltepunkt, der lediglich den Behälter betrifft.

    .main-content aside { min-width: 25%; width: calc((48em - 100%) * 1000); max-width: 100%; }

    11. Erstellen Sie reaktionsfähige Blöcke

    Erstellen Sie ein Blog mit Grid und Flexbox: Responsive Blocks

    Verwenden Sie Container-Divs, um Ihre reaktionsfähigen Blöcke zu erstellen

    Um die vorgestellten Elemente zu erstellen, die auf der Seite ausgeführt werden, verwenden wir schließlich unsere ersten Container-Divs.

    12. Wiederholen und automatisch anpassen

    Für unsere Kartenliste möchten wir vier in einer Reihe haben, aber da wir keine Medienabfragen verwenden, legen wir unsere fest Minimal Maximal Wert auf 300px, was gut auf ein kleines Handy passt. Durch die Verwendung von Wiederholung und automatischer Anpassung erledigt der Browser die harte Arbeit und passt das, was er kann, in eine Zeile ein und startet dann eine andere, sodass wir mit einer Codezeile von vier bis zu einem einzelnen Spaltenlayout wechseln können.

    .card-list { display:grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(300px , 1fr)); } .card { display: grid; grid-template-columns: 1fr; }

    13. Erstellen Sie ein Kartenlayout

    Für die Details auf der Karte wechseln wir zurück zu Flex und stellen den Fluss auf Spalte ein, sodass die Elemente vertikal fließen. Stellen Sie die Inhalt rechtfertigen passendes Eigentum - in diesem Fall platzgleichmäßig funktioniert gut. Da das 'a'-Tag in diesem Bereich einen Block anzeigt, wird die Breite des Containers gedehnt. Stellen Sie es auf ein Flex-Start so dass es nur den Raum seines Inhalts einnimmt.

    .card-details { display: flex; flex-direction: column; justify-content: space-evenly; } .card-details a { align-self: flex-start; }

    Wir sind bereits in der Fußzeile und werden nur einige der Stile verwenden, die wir zuvor verwendet haben, um sie zu gestalten.

    15. Richten Sie das untergeordnete Element aus

    In dieser Fußzeile befinden sich drei Bereiche. Stellen Sie Ihre Rasterspalten so ein, dass drei zu je einer Brucheinheit wiederholt werden. Sie könnten einfach 'Grid-Template-Spalten schreiben: 1fr 1fr 1fr;' wenn Sie es vorziehen. Die sozialen Symbole werden rechtsbündig angezeigt. Sie können dies tun, indem Sie dem Element selbst mitteilen, dass es mit rechts ausgerichtet werden soll Selbst rechtfertigen .

    Pfad konvertieren, um Photoshop cc zu formen
    .footer { display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: column; align-items: center; } .social { justify-self: end; }

    16. Berücksichtigen Sie die Kompatibilität

    Obwohl dieses Tutorial für alle drei großen Browser und modernen Geräte gut funktioniert, wurde es nicht im IE getestet. Abhängig von Ihrem Projekt können Sie eine progressive Verbesserung verwenden und ein einfaches Layout bereitstellen. Wenn Ihr CSS mit einem Präprozessor wie Sass erstellt wird, bietet das Autoprefixer-Paket einige der zusätzlichen Präfixe, die für Edge erforderlich sind.

    Dieser Artikel wurde ursprünglich in Ausgabe 284 des Creative Web Design Magazins veröffentlicht Webdesigner . Kaufen Sie hier die Ausgabe 284 oder Abonnieren Sie hier den Web Designer .

    Zum Thema passende Artikel: