Techniken für ein Zeitungs-Layout mit CSS-Raster und die Grenzen Zwischen den Elementen

0
243

Vor kurzem hatte ich auf Handwerks Zeitung-wie design, die vorgestellten mehrere Zeile und Spalte umfasst, mit Trennlinie zwischen Ihnen. Werfen Sie einen Blick auf die Attrappe Grafik hier und sehen, ob es macht Sie Schwitzen überhaupt. Wenn Sie wie ich sind, haben Sie etwa schon eine Weile und weiß, wie schwierig das gewesen wäre mit dem alten layout-Techniken.

Zeitung design mit line-Trennwände zwischen den Zellen

Das Projekt kam mit ein paar Anforderungen:

  • Zeigen die Umrisse des Gitters
  • Die Spalten werden breiter, oder länger als andere
  • Teiler Zeilen müssen zwischen den verschiedenen Blöcken

CSS Grid: Lehr-und alten layout, neue tricks

Zeitungs-layouts können Kopfschmerzen verursachen, weil die alltäglichen CSS ist ein-dimensional, was bedeutet, dass Elemente fließen auf, entweder eine horizontale oder vertikale Achse. Auch die moderne flexbox-layout ist noch uni-direktional.

Für ein layout wie diese, würden wir fast möchten die Eigenschaften, die guten alten HTML-Tabellen einmal zur Verfügung gestellt: Dinge wie Zeile und Spalte umfasst, um Zellen dehnen sich in alle Richtungen. Wir wollen auch die Vorteile von modernen CSS, mit allen die Reaktionsfähigkeit und die flexiblen Boxen, die dort wachsen, füllen den verfügbaren Raum.

CSS-grid verbindet das beste von Tabellen mit den besten flexible boxes. In der Tat, grid ist sogar besser, weil es die grid-gap-Eigenschaft für die Erstellung von Dachrinnen, die zwischen den Zellen während der Einnahme verfügbare Speicherplatz berücksichtigt. Mächtiger als diese sein können, wie können wir es schaffen Teiler-Linien genau in der Mitte dieser Rinnen?

Schauen wir uns drei Techniken zu machen, dass passieren.

Was wir erstellen werden

Zuerst bauen wir eine vereinfachte version der Zeitung entwerfen, mit deren Hilfe Sie verdeutlichen die crux der drei verschiedenen Techniken, die wir in Deckung zu gehen. Ein trügerisch einfaches design, würde man sagen.

Spalte und Zeile umfasst in einem CSS-grid-layout

Technik 1: Der faux-column

Diese Lösung schafft “faux” – Spalten, die es uns ermöglichen, zeichnen Sie vertikale Linien, und dann legen Sie ein raster an der Spitze. Horizontale Trennwände sind lackiert, wenn nötig. Die “faux” – Spalten erstellt werden, mit pseudo-Selektoren in der grid-container.

<div class=”frontpage”>
<div class=”fp-cell-fp-Zelle-1″>
<div class=”fp-item”>1</div>
</div>
<div class=”fp-cell-fp-Zelle-2″>
<div class=”fp-item”>2</div>
</div>
<div class=”fp-cell-fp-Zelle-3 fp-Zelle–border-top”>
<div class=”fp-item”>3</div>
</div>
<div class=”fp-cell-fp-Zelle-4 fp-Zelle–border-top”>
<div class=”fp-item”>4</div>
</div>
</div>

Siehe Stift
Zeitungs-design “faux-column” – Technik von Marco Troost (@marco-troost)
auf CodePen.

Die Einrichtung der Linien zwischen den Spalten

Erstellen wir ein drei-Säulen-container mit display: grid und pseudo-Selektoren (:before und :after) zu erstellen, die zwei Spalten zu füllen, die 100% der Höhe des Containers.

.frontpage {
position: relative;
display: grid;
/* Drei-Spalten */
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 32px;
border: 1px solid transparent;
border-top: 1px solid #DADCE0;
border-bottom: 1px solid #DADCE0;
overflow: hidden;
}

/* Zwei faux Spalten */
.frontpage:vor,
.frontpage:after {
position: absolute;
top: 0;
height: 100%;
Inhalt: “;
width: calc(33.3% – 4px);
}

.frontpage:vor {
left: 0;
border-right: 1px solid #DADCE0;
}

.frontpage:after {
right: 0;
border-left: 1px solid #DADCE0;
}

Hinweis:in 33% der container nicht nehmen, die Dachrinne Breite berücksichtigt, so werden Sie zu kompensieren.

Dies wird wie folgt berechnet:

33% minus (Steg-Breite geteilt durch (Anzahl der Dachrinnen-fache Menge an Dachrinnen)) geteilt durch die Menge von Dachrinnen)

Oder, mit den tatsächlichen zahlen:

33% – (32 / (2* 2)) / 2 = 4

Wir können mit einer pseudo-Selektor statt:

.frontpage {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 32px;
border: 1px solid transparent;
border-top: 1px solid #DADCE0;
border-bottom: 1px solid #DADCE0;
overflow: hidden;
}

.frontpage:vor {
box-sizing: border-box;
position: absolute;
top: 0;
height: 100%;
Inhalt: “;
Links: calc(33.3% – 5.3 px);
width: calc(33.3% + 10.7 px);
border-left: 1px solid #DADCE0;
border-right: 1px solid #DADCE0;
}

Siehe Stift
Newsgrid-layout ‘faux columns’ (nur für :vor) von Marco Troost (@marco-troost)
auf CodePen.

Hinweis: Eine andere Berechnung ist erforderlich, wenn Sie nur eine pseudo-Selektor: Eine für die Positionierung, und eine für die Breite.

Die Breite berechnet sich wie folgt:

33% plus (die Höhe der Dachrinnen Zeiten gutter-width) / (Anzahl der Dachrinnen-mal Anzahl der Spalten)

Wieder, mit den tatsächlichen zahlen:

33% + (2 * 32) / (2 * 3) = 10.7

Die position wird berechnet als:

33% minus (Höhe der Dachrinnen Zeiten gutter-width) / (Anzahl der Dachrinnen-mal Anzahl der Spalten) geteilt durch 2)
Das Starterfeld

Das design besteht aus vier Blöcken von Inhalten. Wir legen Sie Sie in den Behälter und geben Sie eine modifier-Klasse für zukünftige Referenz, während Sie sicherstellen, dass Ihre z-index höher ist als die pseudo-Selektoren in der Tabelle.

<div class=”frontpage”>
<div class=”fp-cell-fp-Zelle-1″></div>
<div class=”fp-cell-fp-Zelle-2″></div>
<div class=”fp-cell-fp-Zelle-3″></div>
<div class=”fp-cell-fp-Zelle-4″></div>
</div>

Legen Sie nun die Hintergrundfarbe für die Zellen (.fp-cell) in weiß. Dieser Weg, die vertikalen Linien zeigen nicht durch. Wir können auch den vertikalen Abstand für die Zelle 16px-im Einklang mit der Hälfte der Rinne.

Der erste und der zweite content-Blöcke sollten Ihre eigenen einzigartigen überspannt, wie gezeigt in das design. Der erste block erstreckt sich über alle der Weg nach unten und der zweite block erstreckt sich über die zweite und Dritte Spalte.

.fp-Zelle {
position: relative;
z-index: 2;
padding: 16px 0;
background-color: #fff;
}

/* Spanne den ganzen Weg hinunter! */
.fp-Zelle-1 {
grid-row: 1 / span 2;
}

/* Span der zweiten und Dritten Spalten */
.fp-cell–2 {
grid-column: 2 / Spannweite 2;
}
Vertikale Linie Teiler

Wenn Sie einen Blick auf das design, nur die letzten beiden Zellen müssen eine horizontale Grenze. Wir geben ’em ein süßes modifier-Klasse.

<div class=”frontpage”>
<div class=”fp-cell-fp-Zelle-1″></div>
<div class=”fp-cell-fp-Zelle-2″></div>
<div class=”fp-cell-fp-Zelle-3 fp-Zelle–border-top”></div>
<div class=”fp-cell-fp-Zelle-4 fp-Zelle–border-top”></div>
</div>
.fp-cell–border-top:before {
Inhalt: “;
position: absolute;
top: 0;
left: -16px;
right: -16px;
border-top: 1px solid #DADCE0;
}

Die negative Ränder um die Hälfte der Breite Rinne.

Technik #2: Mit hintergrund-Farbe

Ein weiterer Weg, um erstellen Sie die Trennwände zu nutzen der grid-gap-Eigenschaft. Diese Lösung muss nicht unbedingt ein “echter” Abstand zwischen Zellen, sondern lässt einige leere Raum, wo die hintergrund-Farbe des Gitters kann durchscheinen. Die Dachrinne Breite ist delegiert an die Polsterung innerhalb der grid Zellen.

<div class=”container”>
<div class=”frontpage”>
<div class=”fp-cell-fp-Zelle-1″>
<div class=”fp-item”>1</div>
</div>
<div class=”fp-cell-fp-Zelle-2″>
<div class=”fp-item”>2</div>
</div>
<div class=”fp-cell-fp-Zelle-3″>
<div class=”fp-item”>3</div>
</div>
<div class=”fp-cell-fp-Zelle-4″>
<div class=”fp-item”>4</div>
</div>
</div>
</div>
.container {
overflow-x: hidden;
border-top: 1px solid #DADCE0;
border-bottom: 1px solid #DADCE0;
}

.frontpage {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
raster-Abstand: 1px;
margin: 0 -16px;
background-color: #DADCE0;
}

.fp-Zelle {
background-color: #fff;
Polsterung: 16px;
}

.fp-Zelle-1 {
grid-row: 1 / span 2;
}

.fp-cell–2 {
grid-column: 2 / Spannweite 2;
}

.fp-cell–3 {
grid-column: 2;
}

.fp-item {
background-color: #efefef;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
height: 100%;
}

Siehe Stift
Zeitung-design, background-color-Technik von Marco Troost (@marco-troost)
auf CodePen.

Da alle Zellen haben eine extra 16px horizontale Polsterung, das raster muss ausgeglichen werden, indem nur so viel. Eine wrapper-container kümmert sich um den überlauf.

<div class=”container”>
<div class=”frontpage”>
<!– … –>
</div>
</div>
.container {
border-top: 1px solid #DADCE0;
border-bottom: 1px solid #DADCE0;
overflow-x: hidden;
}

.frontpage {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
raster-Abstand: 1px;
background-color: #DADCE0;
margin: 0 -16px;
}

Technik #3: Erstellen einer Zelle Grenze

Diese Lösung fügt einen rechten und unteren Rand jeder Zelle. Wie das Letzte Beispiel, das raster-Lücke könnten durch Zugabe Polsterung, um den Inhalt der Zelle. Das heißt, es muss auch verpackt in einen extra-container.

<div class=”container”>
<div class=”frontpage”>
<div class=”fp-cell-fp-Zelle-1″>
<div class=”fp-item”>1</div>
</div>
<div class=”fp-cell-fp-Zelle-2″>
<div class=”fp-item”>2</div>
</div>
<div class=”fp-cell-fp-Zelle-3″>
<div class=”fp-item”>3</div>
</div>
<div class=”fp-cell-fp-Zelle-4″>
<div class=”fp-item”>4</div>
</div>
</div>
</div>
.container {
border-top: 1px solid #DADCE0;
overflow-x: hidden;
}

.frontpage {
margin: 0 -17px 0 -16px;
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

.fp-Zelle {
Polsterung: 16px;
background-color: #fff;
border-right: 1px solid #DADCE0;
border-bottom: 1px solid #DADCE0;
}

.fp-Zelle-1 {
grid-row: 1 / span 2;
}

.fp-cell–2 {
grid-column: 2 / Spannweite 2;
}

.fp-cell–3 {
grid-column: 2;
}

.fp-item {
background-color: #efefef;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
height: 100%;
}

Siehe Stift
Zeitung-design, ‘cell-border” -Technik von Marco Troost (@marco-troost)
auf CodePen.

Wie erwähnt, ist jede Zelle erhält einen Rand auf der rechten und auf der Unterseite. Der wichtigste trick hier ist, das (asymmetrische) negative Marge auf das raster. Dies ist nötig, um einen Ausgleich für die Zelle nach rechts an den Rand.

.frontpage {
margin: 0 -17px 0 -16px;
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

Fazit

Occam ‘ s razor besagt, dass die einfachste Lösung gewinnt. In unserem Fall, dass die Technik die Nummer zwei. Aber dann wieder, die anderen Lösungen haben viel zu viel verdienen und Sie könnten sich als nützlich erweisen, wenn beispielsweise der Zugriff auf das DOM ist nicht möglich.

Alle diese Techniken arbeiten. Die Wahl der richtige ist, hängt von Ihrem Anwendungsfall. Das erste Verfahren verwendet die aktuelle Gitter-Spalt-Eigenschaft zu erstellen, die Lücken, aber die anderen sind vielleicht einfacher zu verstehen, auf einen Blick… und vielleicht einfacher zu pflegen, wie gut.