Mit einer Handvoll Stilen können Sie dieses attraktive, flexible Layout für viele Arten von Seiteninhalten verwenden.
CSS bietet Ihnen viel Flexibilität bei der Gestaltung ansprechender, responsiver Layouts. Ein Layout im Magazinstil organisiert gemischte Text- und Bildinhalte in einem attraktiven, auffälligen Format und ist daher eine beliebte Wahl.
CSS Grid bietet Ihnen die Werkzeuge und die fein abgestufte Steuerung, die Sie zum Erstellen dieses Layouts benötigen. Es handelt sich also um eine großartige Technik zum Erlernen.
Was sind Layouts im Zeitschriftenstil?
Layouts im Zeitschriftenstil verwenden eine gitterartige Struktur, um Inhalte in Spalten und Zeilen anzuordnen.
Sie eignen sich hervorragend, um verschiedene Arten von Inhalten wie Artikel, Bilder und Anzeigen auf organisierte und ansprechende Weise anzuzeigen.
CSS-Raster verstehen
CSS Grid ist ein robustes Layout-Tool, mit dem Sie Elemente im zweidimensionalen Raum positionieren, was es einfach macht Erstellen Sie Spalten und Zeilen.
Bei dieser Art von Layout kommen zwei Hauptkomponenten ins Spiel: der Rastercontainer, der für die Definition der Rasterstruktur verantwortlich ist, und die Rasterelemente, die die untergeordneten Elemente des Containers sind.
Hier ist ein einfaches Beispiel, wie Sie mit CSS Grid ein 3x3-Raster erstellen können:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Dieser Code definiert einen Rastercontainer mit drei Spalten gleicher Breite und einem Abstand von 20 Pixeln zwischen den Elementen. Hier ist das Ergebnis:
Einrichten der HTML-Struktur
Für ein Layout im Zeitschriftenstil benötigen Sie ein gut strukturiertes HTML-Dokument. In Betracht ziehen Verwenden Sie semantische Elemente, um Ihre Inhalte zu organisieren wie
<body>
<sectionclass="magazine-layout">
<article>
<imgsrc="https://source.unsplash.com/random/?city, night" />
<p>Some Article Titlep>
article><article>
<imgsrc="https://source.unsplash.com/random/?city, day" />
<p>Some Article Titlep>
article><article>
<imgsrc="https://source.unsplash.com/random/?animal" />
<p>Some Article Titlep>
article><article>
<imgsrc="https://source.unsplash.com/random/?book" />
<p>Some Article Titlep>
article>
<article>
<imgsrc="https://source.unsplash.com/random/?food" />
<p>Some Article Titlep>
article>
section>
body>
Definieren des Grid-Containers
Um ein Raster für Ihr magazinartiges Layout zu erstellen, fügen Sie den folgenden CSS-Code hinzu:
.magazine-layout {
height: 100%;
max-width: 130rem;
margin: 0 auto;/* Defines the grid container */
display: grid;/* Defines the column specification */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Defines the row specification */
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}
Dieses CSS gibt an, dass das Containerelement .magazine-layoutist ein Gittercontainer, der die Deklaration verwendet Anzeige: Raster.
Die Eigenschaften „grid-template-columns“ und „grid-template-rows“ verwenden eine Kombination aus wiederholen, automatisch anpassen, Und Minimal Maximal. Diese stellen sicher, dass die Spaltenbreiten und Zeilenhöhen mindestens sind 250px, und in jedes passen möglichst viele Gegenstände hinein.
Rasterelemente platzieren
Gestalten Sie nun jeden Artikel und seinen Inhalt, um attraktive Elemente im Miniaturbildstil zu erstellen:
article {
overflow: hidden;
border-radius: 0.5rem;
position: relative;
color: #fff;
}.articleimg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.articlep {
position: absolute;
bottom: 0;
left: 0;
padding: 2rem;
background: #333333c1;
font-size: 2rem;
border-radius: 0.5rem;
}
Zu diesem Zeitpunkt sollte Ihre Webseite etwa wie folgt aussehen:
Erstellen von Layouts im Magazinstil
Um einen echten Zeitschriften-Look zu erzielen, fügen Sie CSS-Stile hinzu, um die Artikelelemente in beliebiger Reihenfolge zu überspannen:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
Ihre Seite sollte nun so aussehen:
Responsives Design mit CSS Grid
Einer der Vorteile von CSS Grid ist seine inhärente Reaktionsfähigkeit. Du kannst Verwenden Sie Medienabfragen, um das Layout anzupassen für verschiedene Bildschirmgrößen. Zum Beispiel:
/* Media query for screens up to 1100px */
@media screen and (max-width:1100px) {
.article:nth-child(3) {
grid-column: 2 / span 2;
}.article:nth-child(5) {
grid-row: 3 / span 1;
}
}
/* Media query for screens up to 600px */
@media screen and (max-width:600px) {
.article:nth-child(2),
.article:nth-child(3),
.article:nth-child(4),
.article:nth-child(5) {
grid-column: 1 / span 3;
}
}
Diese Medienabfragen wechseln zwischen mehreren Layoutdefinitionen, um sie optimal an die Bildschirmgröße des Geräts anzupassen. Ihr endgültiges Layout wird an verschiedene Größen angepasst:
Transformieren Sie Ihre Layouts mit CSS Grid
CSS Grid ist ein flexibles Tool, mit dem Sie magazinartige Layouts erstellen können, die sich an unterschiedliche Bildschirmgrößen anpassen. Sie können damit Rasterstrukturen definieren, Elemente platzieren und Layouts anpassen.
Experimentieren Sie mit verschiedenen Rasterkonfigurationen und -stilen, um das perfekte, von Magazinen inspirierte Layout für Ihre Website zu erhalten.
