Techniken für ein Zeitungslayout mit CSS -Raster und Grenzlinien zwischen Elementen

Vor kurzem habe ich ein Zeitungsstil angegangen, das Multi-Row- und Säulenspannen mit Inter-Element-Trennwänden erfordert. Das Modell (oben) unterstreicht die Komplexität, die diese vorlegt. Traditionelle Layoutmethoden hätten dies zu einer bedeutenden Herausforderung gemacht.

Die wichtigsten Anforderungen des Projekts waren:

• Klare Rasterumrisse.
• Variable Spaltenbreiten und Höhen.
• Trenner zwischen Blöcken.

CSS Grid: Eine moderne Lösung für klassische Layouts

Zeitungslayouts sind aufgrund der eindimensionalen Natur von Standard-CSS notorisch schwierig. Elemente fließen horizontal oder vertikal. Sogar Flexbox bleibt zwar leistungsfähig, aber bleibt unidirektional.

Dieses Layout forderte die Zeilen- und Säulenfunktionen von HTML -Tabellen in Kombination mit der Reaktionsfähigkeit und Flexibilität des modernen CSS. CSS Grid schlägt diese Lücke elegant und bietet das Beste aus beiden Welten. Seine grid-gap ist besonders nützlich für die Erstellung von Dachrinnen, aber genau die Teilnehmer in diesen Dachrinnen erfordert eine sorgfältige Berücksichtigung.

Erforschen wir drei Techniken, um dies zu erreichen.

Unser Ziel

Wir werden ein vereinfachtes Zeitungsdesign erstellen, um drei Teilertechniken zu veranschaulichen. Die Einfachheit entspricht den zugrunde liegenden Herausforderungen.

Technik 1: Spaltenansatz "Faux"

Diese Methode erstellt "Faux" -Säulen mit Pseudo-Selektoren innerhalb des Gitterbehälters, um vertikale Linien zu zeichnen. Horizontale Teiler werden nach Bedarf hinzugefügt.

<div>
  <div><div>1</div></div>
  <div><div>2</div></div>
  <div><div>3</div></div>
  <div><div>4</div></div>
</div>

Erstellen der Spaltenteiler erstellen

Ein dreispaltiges Netz wird unter Verwendung von display: grid eingerichtet. Pseudo-Selektoren ( ::before und ::after ) erzeugen zwei Spalten in voller Höhe.

 .FrontPage {
  Position: Relativ;
  Anzeige: Grid;
  Grid-Template-Säulen: 1fr 1fr 1fr;
  Grid-Säulen-Lücke: 32px;
  Grenze: 1px fest transparent;
  Border-Top: 1PX Solid #Dadce0;
  Border-Bottom: 1PX Solid #Dadce0;
  Überlauf: versteckt;
}

.FrontPage :: vor,
.FrontPage :: After {
  Position: absolut;
  Top: 0;
  Höhe: 100%;
  Inhalt: '';
  Breite: Calc (33,3% - 4px); / * Berechnung zur Berücksichtigung der Dachrinne */
}

.FrontPage :: vor {
  links: 0;
  Grenzrechte: 1PX Solid #Dadce0;
}

.FrontPage :: After {
  Rechts: 0;
  Border-Links: 1PX Solid #Dadce0;
}

Hinweis: Die Berechnung 33.3% macht die Rinnenbreite aus. Die Formel lautet: 33% - (gutter-width / (number of gutters * number of columns)) .

Ein einzelner Pseudoelement könnte auch mit angepassten Breite und Positionierungsberechnungen verwendet werden.

Bauen des Netzes

Vier Inhaltsblöcke werden hinzugefügt, jeweils mit einer Modifikatorklasse und einem z-index höher als die Pseudoelemente.

<div>
  <div class="fp-cell fp-cell--1"></div>
  <div class="fp-cell fp-cell--2"></div>
  <div class="fp-cell fp-cell--3 fp-cell--border-top"></div>
  <div class="fp-cell fp-cell--4 fp-cell--border-top"></div>
</div>

CSS stilft die Zellen und behandelt die Zeilen-/Säulenspannen.

 .fp-cell {
  Position: Relativ;
  Z-Index: 2;
  Polsterung: 16px 0;
  Hintergrundfarbe: #fff;
}

/ * Spannstile *///
.fp-cell-1 {Grid-Row: 1 / span 2; }
.fp-cell-2 {Grid-Säule: 2 / span 2; }

/ * Horizontaler Teiler */
.fp-cell-grenzüberschreitend :: vor {
  Inhalt: '';
  Position: absolut;
  Top: 0;
  links: -16px;
  Rechts: -16px;
  Border-Top: 1PX Solid #Dadce0;
}

Technik 2: Hintergrundfarbe

Dieser Ansatz nutzt grid-gap und die Hintergrundfarbe. Die "Lücke" wird visuell durch die Hintergrundfarbe des Netzes erzeugt. Die Polsterung in den Gitterzellen simuliert die Rinnenbreite.

<div class="container">
  <div class="frontpage">
    <div class="fp-cell fp-cell--1"><div class="fp-item">1</div></div>
    <div class="fp-cell fp-cell--2"><div class="fp-item">2</div></div>
    <div class="fp-cell fp-cell--3"><div class="fp-item">3</div></div>
    <div class="fp-cell fp-cell--4"><div class="fp-item">4</div></div>
  </div>
</div>

.Container {Überlauf-x: versteckt; Border-Top: 1PX Solid #Dadce0; Border-Bottom: 1PX Solid #Dadce0; }
.FrontPage {...} / * Grid-Stile wie zuvor, aber mit Hintergrundfarbe * /
.fp-cell {padding: 16px; Hintergrundfarbe: #fff; }

Der Container verarbeitet Überlauf und poliert die Zellen.

Technik 3: Zellgrenzen

Diese Technik fügt jeder Zelle die rechte und untere Grenzen hinzu. Die Polsterung simuliert die grid-gap . Ein Wrapperbehälter ist erneut erforderlich.

<div class="container">
  <div class="frontpage">
    <div class="fp-cell fp-cell--1"><div class="fp-item">1</div></div>
    ...
  </div>
</div>

.Container {Border-Top: 1PX Solid #Dadce0; Überlauf-X: versteckt; }
.FrontPage {Margin: 0 -17px 0 -16px; ...} / * Gitterstile, negative Margen für die Grenzkompensation * /
.fp-cell {padding: 16px; Hintergrundfarbe: #fff; Grenzrechte: 1PX Solid #Dadce0; Border-Bottom: 1PX Solid #Dadce0; }

Die negativen Margen kompensieren die Zellgrenzen.

Abschluss

Während alle drei Techniken lebensfähig sind, bietet die zweite (Hintergrundfarbe) die einfachste und potenziell am meisten wartbare Lösung. Die anderen Ansätze können jedoch je nach bestimmten Einschränkungen oder DOM -Zugriffsbeschränkungen vorzuziehen sein. Die beste Wahl hängt vom Kontext des Projekts ab.

Das obige ist der detaillierte Inhalt vonTechniken für ein Zeitungslayout mit CSS -Raster und Grenzlinien zwischen Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!