CSS-Code zum Erstellen von 10 modernen Layouts

Vorwort

Ich habe mir am Sonntag zu Hause das dreitägige Live-Event von web.dev 2020 angesehen und viele interessante Dinge erfahren, unter anderem über CSS. Moderatorin war Una Kravets (Mitglied des Chrome-Teams). Obwohl ich mich seit mehreren Monaten nicht mehr eingehend mit CSS beschäftigt habe, sind meine bisherigen Grundlagen immer noch vorhanden (wenn Sie interessiert sind, können Sie das CSS-Material lesen, das ich vor einem Jahr gepostet habe. Leider sind nicht viele Leute bereit, es zu lesen, weil es zu grundlegend ist).

Hinweis: Die meisten der folgenden Codes wurden von den neuesten gängigen Browsern implementiert. Denken Sie daran, sie nicht in der Produktion zu verwenden. Wenn Sie ein Leser des offiziellen Kontos sind, können Sie aufgrund externer Links darauf klicken, um den Originaltext zu lesen. Auf der GitHub-Seite finden Sie eine ausführlichere Demo.

Text

01. Super Center

Vor Flex und Grid konnte eine vertikale Zentrierung nicht elegant erreicht werden. Jetzt können wir grid und place-items kombinieren, um elegant sowohl eine horizontale als auch eine vertikale Zentrierung zu erreichen.

<div Klasse="übergeordnetes Blau" >
  <div Klasse = "Box Koralle" Inhalt editierbar>
    :)
  </div>

.ex1 .übergeordnet {
    Anzeige: Raster;
    Platziere Elemente: Mitte;
  } 

MDN, detaillierte Erklärung des Place-Items-Attributs

Codepen-Adresse

02. Der dekonstruierte Pfannkuchen

flex: 0 1 <baseWidth>

Dieses Layout sieht man häufig auf E-Commerce-Websites:

Wenn das Ansichtsfenster groß genug ist, werden drei Kästchen mit fester Breite horizontal platziert.

Wenn das Ansichtsfenster nicht groß ist (wie etwa auf einem Mobilgerät), ist die Breite zwar immer noch festgelegt, wird aber automatisch dekonstruiert (verzeihen Sie mein Chinesisch-Niveau) und befindet sich nicht auf derselben Ebene.

<div Klasse="Elternteil weiß">
    <div Klasse="Box grün">1</div>
    <div Klasse="Box grün">2</div>
    <div Klasse="Box grün">3</div>
  </div>

.ex2 .übergeordnet {
    Anzeige: Flex;
    Flex-Wrap: Umwickeln;
    Inhalt ausrichten: zentriert;
  }

  .ex2 .box {
    flex: 1 1 150px; /* flex-grow: 1, bedeutet automatisches Erweitern auf die maximale Breite*/
    flex: 0 1 150px; /* Keine Dehnung: */
    Rand: 5px;
  } 

Wenn wir flex: 1 1 150px;

Wann:

Codepen-Adresse

03. Klassische Seitenleiste

grid-template-columns: minmax(<min>, <max>) ...

Sie können auch grid mit minmax() kombinieren, um eine flexible Seitenleiste zu erhalten (dies ist nützlich, wenn Sie eine Anpassung an große Bildschirme wünschen). minmax(<min>, <max>) ist genau das, was es sagt. In Kombination mit der Einheit <flex> ist dies sehr elegant und vermeidet unflexible Methoden wie mathematische Berechnungen der Breite (wie beim Festlegen der Lücke).

<div Klasse="übergeordnet">
    <div Klasse = "Abschnitt gelb" contenteditable>
    Mindestens: 150 Pixel/Maximal: 25 %
    </div>
    <div Klasse = "Abschnitt lila" Inhalt editierbar>
      Dieses Element nimmt die zweite Rasterposition (1fr) ein, d.
      es nimmt den restlichen verbleibenden Platz ein.
    </div>
  </div>

.ex3 .übergeordnet {
    Anzeige: Raster;
    Rastervorlagenspalten: minmax (150px, 25 %) 1fr;
  } 

Codepen-Adresse

04. Kopf- und Fußzeile korrigiert

grid-template-rows: auto 1fr auto

Ein Header und Footer mit fixer Höhe und einem Body, der den restlichen Platz einnimmt, ist ein häufig verwendetes Layout, welches wir mithilfe von grid und fr Units optimal umsetzen können.

<div Klasse="übergeordnet">
    <header class="blue section" contenteditable>Kopfzeile</header>
    <main class="coral section" contenteditable>Hauptseite</main>
    <footer class="purple section" contenteditable>Fußzeileninhalt</footer>
  </div>

.ex4 .übergeordnet {
    Anzeige: Raster;
    Rastervorlagenzeilen: auto 1fr auto;
  } 

Codepen-Adresse

05. Klassisches Holy Grail-Layout

grid-template: auto 1fr auto / auto 1fr auto

Mit dem Rasterlayout können wir problemlos das ultimative Layout erreichen, und es ist flexibel.

<div Klasse="übergeordnet">
    <header class="pink section">Kopfzeile</header>
    <div class="left-side blue section" contenteditable>Linke Seitenleiste</div>
    <main class="section coral" contenteditable> Hauptinhalt</main>
    <div class="right-side yellow section" contenteditable>Rechte Seitenleiste</div>
    <footer class="grüner Abschnitt">Fußzeile</footer>
  </div>

.ex5 .übergeordnet {
    Anzeige: Raster;
    Rastervorlage: Auto 1fr Auto / Auto 1fr Auto;
  }
  
  .ex5-Header {
    Polsterung: 2rem;
    Gitterspalte: 1 / 4;
  }

  .ex5 .linke Seite {
    Gitterspalte: 1 / 2;
  }

  .ex5 Haupt {
    Gitterspalte: 2 / 3;
  }

  .ex5 .rechte Seite {
    Gitterspalte: 3 / 4;
  }

  .ex5 Fußzeile {
    Gitterspalte: 1 / 4;
  } 

Codepen-Adresse

06. Interessante Stapelblöcke

Durch die Verwendung von grid-template-columns und grid-column können Sie das in der folgenden Abbildung dargestellte Layout erreichen. Dies verdeutlicht noch einmal die Zweckmäßigkeit von repeat und fr .

Codepen-Adresse

07. RAM-Tipps

grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))

Una Kravets nennt dies die „Repeat-Auto-Minmax-Technik“. Dies ist sehr nützlich bei Bildern/Boxen mit flexiblem Layout (die Anzahl der Karten, die in einer Reihe platziert werden können, passt sich automatisch an).

.ex7 .übergeordnet {
    Anzeige: Raster;
    Gitterlücke: 1rem;
    Rastervorlagenspalten: Wiederholung (automatisch anpassen, Minmax (150px, 1fr));
  }

<div Klasse="Elternteil weiß">
    <div Klasse="Box rosa">1</div>
    <div Klasse="Box lila">2</div>
    <div Klasse="Box blau">3</div>
    <div Klasse="Box grün">4</div>
  </div>

Der Effekt besteht darin, dass, wenn die Mindestbreite mehrerer Boxen eingehalten wird (wie beispielsweise 150px oben), diese automatisch angepasst und auf mehreren Zeilen platziert werden. Zum Beispiel:

• Die aktuelle Breite beträgt 160px (ohne Berücksichtigung der Lücke), daher wird die Breite der vier box oben an 160px angepasst und in 4 Zeilen aufgeteilt.
• Die aktuelle Breite beträgt 310px (ohne Berücksichtigung der Lücke), die vier box oben sind in zwei Reihen aufgeteilt und die beiden box teilen sich die Breite gleichmäßig
• Wenn drei Kisten in einer Reihe platziert werden können, wandert die dritte Kiste automatisch in die erste Reihe.
• Wenn die Anzahl der Kisten in einer Reihe ausreichend ist, wandert die vierte Kiste automatisch in die erste Reihe.

Wenn wir auto-fit in auto-fill ändern:

08. Kartenelastizität und Anpassungsfähigkeit

justify-content: space-between , kombiniert mit grid und flex , um ein perfektes Kartenlayout zu erreichen.

<div Klasse="Elternteil weiß">
    <div Klasse="Karte gelb">
      <h3>Titel – Karte 1</h3>
      <p contenteditable>Mittellange Beschreibung mit ein paar mehr Wörtern hier.</p>
      <div Klasse = "visuelles Pink"></div>
    </div>
    <div class="Karte gelb">
      <h3>Titel – Karte 2</h3>
      <p contenteditable>Lange Beschreibung. Ich freue mich sehr, Sie zu sehen.</p>
      <div Klasse = "visuelles Blau"></div>
    </div>
    <div class="Karte gelb">
      <h3>Titel – Karte 3</h3>
      <p contenteditable>Kurzbeschreibung.</p>
      <div Klasse = "visuelles Grün"></div>
    </div>
  </div>

.ex8 .übergeordnet {
    Höhe: automatisch;
    Anzeige: Raster;
    Gitterlücke: 1rem;
    Raster-Vorlagenspalten: Wiederholung (3, 1fr);
  }

  .ex8 .visual {
    Höhe: 100px;
    Breite: 100 %;
  }

  .ex8 .Karte {
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Polsterung: 1rem;
    Inhalt ausrichten: Abstand dazwischen;
  }

  .ex8 h3 {
    Marge: 0
  } 

Egal ob die Breite bzw. Höhe verkleinert oder vergrößert wird, das Layout der Karte lässt sich optimal darstellen.

Codepen-Adresse

09. Verwenden Sie eine Klammer, um eine flüssige Typografie zu implementieren

clamp(<min>, <actual>, <max>)

Mit der neuen Methode clamp() kann fließende Typografie in einer Zeile implementiert werden. Verbessert die UX, sehr gut geeignet für Karten mit Leseinhalten, da wir keine zu kurze oder zu lange Textzeile haben möchten.

<div Klasse="Elternteil weiß">
    <div Klasse="Karte lila">
      <h1>Titel hier</h1>
      <div Klasse = "visuelles Gelb"></div>
      <p>Beschreibender Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
    </div>
  </div>

.ex9 .übergeordnet {
    Anzeige: Raster;
    Platziere Elemente: Mitte;
  }

  .ex9 .Karte {
    Breite: Klemme (23 Kanäle, 50 %, 46 Kanäle);
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Polsterung: 1rem;
  }

  .ex9 .visual {
      Höhe: 125px;
      Breite: 100 %;
    } 

MDN, clamp() erklärt

10. Perfekte Proportionen

aspect-ratio: <width> / <height>

Bei der Anzeige von CMS- oder anderen Designinhalten erwarten wir, dass Bilder, Videos und Karten in einem festen Proportion angeordnet werden. Das neueste aspect-ratio kann diese Funktion elegant erreichen (mit Chrome 84+)

<div Klasse="Elternteil weiß">
    <div class="Karte blau">
      <h1>Videotitel</h1>
      <div Klasse = "visuelles Grün"></div>
      <p>Beschreibender Text. Diese Demo funktioniert in Chromium 84+.</p>
    </div>
  </div>

.ex10 .übergeordnet {
    Anzeige: Raster;
    Platziere Elemente: Mitte;
  }

  .ex10 .visual {
    Seitenverhältnis: 16 / 9;
  }

  .ex10 .Karte {
    Breite: 50%;
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Polsterung: 1rem;
  } 

Codepen-Adresse