Neugestaltung einer Site für die Verwendung von CSS -Netzlayout

In diesem Artikel werden wir CSS-Netz in Aktion sehen, indem wir ein reaktionsschnelles Multi-Säulen-Website-Layout erstellen.

CSS Grid ist heutzutage ein neuer, heißer Trend in der Webentwicklung. Vergessen Sie Tischlayouts und Floats: Eine neue Art, Websites zu entwerfen, ist bereits da! Diese Technologie führt zweidimensionale Gitter ein, die mehrere Layoutbereiche mit einer Handvoll CSS-Regeln definieren.

Gitter kann Drittanbieter-Frameworks wie 960Gs oder Bootstrap Grid redundant erstellen, da Sie möglicherweise leicht alles selbst tun! Diese Funktion wird von allen großen Browsern unterstützt, obwohl Internet Explorer eine ältere Version der Spezifikation implementiert.

Wenn Sie neu im Rasterlayout sind, lesen Sie unsere Anfängerhandbuch zum CSS -Raster.

Key Takeaways

• CSS-Gitterlayout vereinfacht die Erstellung von Multi-Säulen-Layouts und beseitigt die Notwendigkeit alter Techniken wie Schwimmer und Displaytabellen.
• CSS -Netz ermöglicht eine einfache Neupositionierung und -grenze von Netzbereichen, wodurch es zu einer flexibleren und intuitiveren Designmethode im Vergleich zu herkömmlichen CSS -Frameworks wie Bootstrap ist.
• Die Implementierung des CSS -Gitters beinhaltet die Definition eines Containers mit Anzeige: Gitter, Einrichten von Spalten und Zeilen und das Platzieren von Elementen in festgelegte Gitterbereiche mit einfachen CSS -Regeln.
• CSS -Gitter reagiert von Natur aus und ermöglicht die einfache Umstrukturierung von Inhalten für verschiedene Bildschirmgrößen mit minimalen Medienabfragen.
• Für Browser, die CSS-Netze nicht vollständig unterstützen, wie Internet Explorer, Fallback-Stile mit Inline-Block- und Medienabfragen stellen sicher, dass Layouts immer noch effektiv rendern.
• CSS -Gitter und Flexbox können kombiniert werden, um komplexe Designanforderungen zu erfüllen und die Kompatibilität und die Vielseitigkeit von CSS Grid im modernen Webdesign zu präsentieren.

Was werden wir

erstellen

Wir wurden also gebeten, ein typisches Website -Layout mit einem Header, einem Hauptinhaltsbereich, einer Seitenleiste rechts, einer Liste von Sponsoren und einer Fußzeile zu erstellen:

Ein anderer Entwickler hat bereits versucht, diese Aufgabe zu lösen und eine Lösung zu finden, die Schwimmer, Anzeigen: Tabelle und einige ClearFix -Hacks umfasst. Wir werden dieses vorhandene Layout als "initial" bezeichnen:

Siehe das Layout für Pen SP: Multi-Säulen-Layout mit Floats von SitePoint (@sinepoint) auf CodePen.

Bis vor kurzem wurden Floats als die beste Option angesehen, um solche Layouts zu erstellen. Zuvor mussten wir HTML -Tabellen verwenden, aber sie hatten eine Reihe von Nachteilen. Insbesondere ist ein solches Tabellenlayout sehr starr und erfordert viele Tags (Tabelle, TR, TD, TH usw.), und semantisch werden diese Tags verwendet, um Tabellendaten zu präsentieren, nicht um Layouts zu entwerfen.

Aber CSS entwickelt sich weiter und jetzt haben wir ein CSS -Netz. Konzeptionell ähnelt es einem alten Tischlayout, kann jedoch semantische HTML -Elemente mit einem flexibleren Layout verwenden.

Planen Sie das Netz

Zuerst

Erste Dinge: Wir müssen eine grundlegende HTML -Struktur für unser Dokument definieren. Lassen Sie uns kurz darüber sprechen, wie das erste Beispiel funktioniert. Es hat die folgenden Hauptblöcke:

• .Container ist die globale Verpackung mit kleinen Rändern links und rechts.
• . Dem Header wird auch eine hackige Fix zugewiesen, um die Schwimmer zu löschen.
• . ). Der Wrapper selbst wird auch mit einem ClearFix zugeordnet.
• .sponsors-wrapper enthält die Logos der Sponsoren. Im Inneren gibt es einen .sponsor -Abschnitt mit der Anzeigeeigenschaft auf der Tabelle eingestellt. Jeder Sponsor wiederum wird als Tabellenzelle angezeigt.
• .Foter ist unsere Fußzeile und reicht bis zu 100% des Raums.

Unser neues Layout wird dem ersten sehr ähnlich sein, aber mit einer Ausnahme: Wir werden die Wrapper für die Wrapper in. Hier ist die neue Version des HTML:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="©">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Beachten Sie, dass Sie den Körper als globaler .container verwenden können; Das ist in diesem Fall nur eine Frage der Präferenz. Alles in allem haben wir sechs Hauptbereiche:

1. Logo
2. Menü
3. Hauptinhalt
4. Seitenleiste
5. Sponsoren
6. Fußzeile

Normalerweise wird empfohlen, einen mobilen Ansatz zu implementieren. Das heißt, Sie starten vom mobilen Layout und fügen dann Stile für größere Bildschirme hinzu. Dies ist in diesem Fall nicht notwendig, da wir ein erstes Layout anpassen, das bereits auf eine linearisierte Ansicht auf Kleine Bildschirmgeräte zurückreicht. Beginnen wir damit, sich auf die Umsetzung des Netzes und nach diesem Gespräch über Reaktionsfähigkeit und Fallback -Regeln zu konzentrieren. Kehren Sie also zu unserem Schema zurück und sehen Sie, wie die Gittersäulen angeordnet werden können:

schlage also vor, drei Säulen (in rot hervorgehoben) und vier Reihen (in blau hervorgehoben) zu haben. Einige Bereiche wie das Logo werden nur eine Spalte besetzen, während andere wie der Hauptinhalt mehrere Spalten umfassen. Später können wir das Layout leicht ändern, die Bereiche umgehen oder neue hinzufügen.

Nach dem Schema geben Sie jedem Bereich einen eindeutigen Namen. Diese werden in dem unten definierten Layout verwendet:

<span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

Stellen Sie nun die Anzeigeeigenschaft auf Netz ein, definieren Sie drei Spalten und fügen Sie links und rechts im Hauptbehälter kleine Ränder hinzu:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="©">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Anzeige: Grid definiert einen Gitterbehälter und stellt einen speziellen Formatierungskontext für seine Kinder fest. FR ist eine spezielle Einheit, die „Bruchteil des freien Raums des Gitterbehälters“ bedeutet. 2 6 4 gibt uns 12 und 6 /12 = 0,5. Dies bedeutet, dass die mittlere Säule 50% des freien Raums belegen wird.

Ich möchte auch einen gewissen Abstand zwischen den Zeilen und Spalten hinzufügen:

<span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

Nachdem wir dies getan haben, können wir mit einzelnen Bereichen arbeiten. Bevor Sie diesen Abschnitt jedoch abschließen, lassen Sie uns schnell einige gängige Stile hinzufügen:

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>

Gut! Jetzt können wir mit dem ersten Ziel fortfahren, was der Header sein wird.

Entwerfen des Headers

Unser Header nimmt die erste Reihe ein, die eine bestimmte Höhe auf 3REM einstellen sollte. Im ersten Layout wird dies gelöst, indem die Höhe der Höhe für die Header -Wrapper zugewiesen wird:

<span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

Beachten Sie auch, dass das Logo und das Menü vertikal auf die Mitte ausgerichtet sind, was mit dem Zeilenhöhentrick erreicht wird:

<span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>

Mit CSS Grid werden die Dinge jedoch einfacher sein: Wir benötigen keine CSS -Hacks.

Beginnen Sie mit der ersten Zeile:

<span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>

Unser Logo sollte nur eine Spalte belegen, während das Menü zwei Spalten umfassen sollte. Wir können unsere Absicht mit Hilfe der Grid-Template-Areas-Eigenschaft ausdrücken, die auf die oben zugewiesenen Netznamen verweist:

<span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>

Was ist hier los? Wenn wir nur einmal Logo sagen, stellen wir sicher, dass es nur eine einnimmt-die links am meisten. Menümenü bedeutet, dass das Menü zwei Spalten einnimmt: die Mitte und die rechtsste. Sehen Sie, wie einfach diese Regel ist!

richten Sie jetzt das Logo auf der y -Achse aus:

<span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>

Das Menü sollte vertikal zentriert und nach rechts gezogen werden:

<span><span>.container</span> {
</span>  // ...
  <span>grid-template-areas:
</span>    <span>"logo menu menu";
</span><span>}
</span>

Unser Menü wurde mit den UL- und Li -Tags erstellt. Stylen wir sie also auch ein wenig, indem wir Markierungen entfernen, Margen/Paddings aufgeben und das Menü in einen Flex -Container einstellen:

<span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span>  <span>align-self: center;
</span><span>}
</span>

das ist ziemlich genau das. Um das Ergebnis zu beobachten, werde ich Firefox mit einem handlichen CSS -Gitter -Highlighter -Werkzeug verwenden. (Es gibt ähnliche Tools für andere Browser: zum Beispiel Gridman für Chrom.) Um Zugriff auf dieses Tool zu erhalten, drücken

Gehen Sie anschließend zur Registerkarte CSS Rules und finden Sie die Anzeige: Grid -Eigenschaft. Durch Drücken des kleinen Symbols neben dem Netzwert können Sie den Textmarker aktivieren oder deaktivieren:

Hier ist das Ergebnis:

Der Highlighter zeigt alle Zeilen und Spalten sowie die Ränder zwischen ihnen und den Namen der Bereiche an. Sie können die Ausgabe im Abschnitt Layout anpassen, in dem auch alle Netze auf der Seite aufgeführt sind:

Also haben wir uns mit dem Header befasst, also gehen wir mit dem Hauptinhaltsbereich und der Seitenleiste fort.

Hauptinhalt und Seitenleiste

Unser Hauptinhaltsbereich sollte zwei Spalten umfassen, während die Seitenleiste nur einen belegen sollte. Was die Reihe betrifft, möchte ich, dass die Höhe automatisch eingestellt wird. Wir können das .Container -Netz entsprechend aktualisieren:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="©">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Ich möchte etwas Polsterung für die Seitenleiste hinzufügen, um ihm einen weiteren visuellen Raum zu geben:

<span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

Hier ist das Ergebnis, wie im Firefox -Netzwerkzeug angesehen:

Sponsoren

Der Abschnitt Sponsoren sollte fünf Elemente mit gleicher Breite und Höhen enthalten. Jedes Element hat wiederum ein Bild.

Im ersten Layout wird dieser Block mit Display: Tabelle gestaltet, aber wir werden uns nicht darauf verlassen. Tatsächlich ist der Sponsorenabschnitt möglicherweise ein großartiger Kandidat für die Anwendung von CSS -Netze!

Bühnen Sie zuallererst die Raster-Template-Areas, um den Sponsorenbereich zu enthalten:

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>

Verwenden Sie nun den Abschnitt .sponsors auch in ein Netz:

<span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

Solange wir fünf Elemente mit gleichen Breiten benötigen, kann die Funktion repep () verwendet werden, um die Spalten zu definieren:

<span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>

für die Zeile sollte die Höhe automatisch festgelegt werden. Die Lücke zwischen den Spalten sollte gleich 1REM sein:

<span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>

Jedes Element style:

<span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>

Hier ist das Zwischenergebnis:

Dieses Beispiel zeigt, dass Sie ohne Probleme Gitter nisten können. Eine andere Lösung könnte die Verwendung von Flexbox verwenden, aber in diesem Fall können die Sponsoren einwickeln, wenn nicht genügend Breite für sie vorliegt.

Jetzt möchte ich die Bilder sowohl vertikal als auch horizontal zentrieren. Wir könnten versuchen, Folgendes zu machen:

<span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>

Das Ort-Selbst richtet das Element auf den x- und y-Achsen aus. Es ist ein Kurzeigeneignis, sich selbst auszurichten und zu rechtfertigen.

Die Bilder werden in der Tat ausgerichtet, aber leider ist der weiße Hintergrund verschwunden. Dies liegt daran, dass jeder .sponsor jetzt Breite und Höhe entspricht der Abmessungen des Bildes:

bedeutet, dass wir hier einen anderen Ansatz benötigen, und eine der möglichen Lösungen besteht darin, Flexbox zu verwenden:

<span><span>.container</span> {
</span>  // ...
  <span>grid-template-areas:
</span>    <span>"logo menu menu";
</span><span>}
</span>

Jetzt wird alles richtig angezeigt, und jetzt wissen wir, dass Grid gut mit Flexbox spielt:

Fußzeile

Unser letzter Abschnitt ist die Fußzeile und es ist tatsächlich der einfachste Abschnitt. Wir müssen es nur auf alle drei Spalten überspannen:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="©">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Grundsätzlich ist das Layout fertig! Wir sind jedoch noch nicht fertig: Die Website muss auch reagieren. Achten Sie also auf diese Aufgabe im nächsten Abschnitt.

Das Layout reagiert

CSS -Gitter im Einsatz, es ist tatsächlich sehr einfach, die Reaktionsfähigkeit einzuführen, da wir die Bereiche schnell neu positionieren können.

große Bildschirme

Beginnen wir mit großen Bildschirmen (in diesem Artikel werde ich an denselben Haltepunkten festhalten, wie in Bootstrap 4 definiert). Ich möchte den horizontalen Rand des Hauptbehälters und die Lücke zwischen einzelnen Sponsoren verringern:

<span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

mittlere Bildschirme

Auf den mittleren Bildschirmen möchte ich, dass der Hauptinhaltsbereich und die Seitenleiste alle drei Spalten besetzen:

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>

Lassen Sie uns auch die Schriftgröße verringern und die Sponsoren stapeln, damit sie einen unter einem anderen angezeigt werden. Die Lücke zwischen den Spalten sollte Null sein (da es tatsächlich nur eine Spalte gibt). Stattdessen setze ich eine Lücke zwischen den Zeilen:

<span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

So sieht das Layout jetzt auf mittleren Bildschirmen aus:

Kleine Bildschirme

Auf kleinen Bildschirmen werden wir jeden Bereich in einer separaten Zeile anzeigen, was bedeutet, dass es jetzt nur noch eine Spalte gibt:

<span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>

Das Menü sollte in diesem Fall nicht rechts gezogen werden, und wir benötigen auch nicht die Lücke zwischen den Spalten:

<span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>

Der Job ist erledigt:

Beachten Sie, dass Sie die Rasterelemente sogar für verschiedene Bildschirme leicht neu ordnen können. Nehmen wir an, wir möchten das Menü unten auf kleinen Bildschirmen einstellen (damit die Besucher nach dem Abschluss des Lesematerials auf der Seite nicht nach oben scrollen müssen). Um dies zu tun, optimieren Sie einfach die Grid-Template-Areas:

<span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>

ohne Medienfragen

Es ist erwähnenswert, dass wir die Sponsoren ohne Medienfragen reaktionsschnell blockieren können. Dies ist mit Hilfe der Auto-Fit-Eigenschaft und der Minmax-Funktion möglich. Um sie in Aktion zu sehen, optimieren Sie die Stile für die .sponsors wie folgt:

<span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>

Die Wiederholungsfunktion wiederholt, wie Sie bereits wissen, die Spalten so oft wie nötig.

Auto-Fill bedeutet „Füllen Sie die Zeile mit möglichst vielen Spalten wie möglich“. Wenn nicht genügend Platz für die Spalte ist, wird sie in die nächste Zeile platziert.

Mit

Minmax können wir den minimalen und maximalen Wert für die Breiten der Spalten angeben. In diesem Fall sollte jede Spalte einen Bruchteil des freien Raums umfassen, jedoch nicht weniger als 200 Pixel.

All dies bedeutet, dass die Spalten auf kleineren Bildschirmen auf höchstens 200px gesunken werden können. Wenn immer noch nicht genügend Platz vorhanden ist, werden eine oder mehrere Spalten in eine separate Linie verschoben. Hier ist das Ergebnis der Anwendung der oben genannten CSS -Regeln:

Fallbacks

Leider wird CSS Grid von allen Browsern noch nicht vollständig unterstützt, und Sie können erraten, welche noch eine ältere Version der Spezifikation implementiert. Ja, es ist Internet Explorer 10 und 11. Wenn Sie die Demo in diesen Browsern öffnen, werden Sie feststellen, dass das Netz überhaupt nicht funktioniert und die Bereiche einfach gestapelt sind:

Dies ist natürlich nicht das Ende der Welt, da die Website noch nutzbar ist, aber zumindest einige Fallback -Regeln hinzufügen. Die gute Nachricht ist, dass das Raster Vorrang hat, wenn das Element schwebt und auch ein Raster zugewiesen ist. Auch die Anzeige, die vertikale Ausrichtung und einige andere Eigenschaften haben auch keinen Einfluss auf die Netzelemente. Nutzen wir diese Tatsache.

Das gestapelte Menü sieht gut aus, aber die Seitenleiste sollte wahrscheinlich neben dem Hauptinhalt platziert werden, nicht darunter. Wir können dies durch Anzeige verwenden: Inline-Block:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="©">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

In allen Browsern, die Raster unterstützen, haben diese Eigenschaften keinen Einfluss, aber in IE werden sie wie erwartet angewendet. Eine weitere Eigenschaft, die wir optimieren müssen, ist die Breite:

<span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

, aber nachdem wir diese Stile hinzugefügt haben, sieht unser Gitterlayout jetzt viel schlechter aus, da die Breite von Eigenschaft von Raster -Artikeln nicht ignoriert wird. Dies kann mit Hilfe der CSS -Abfrage @Supports behoben werden. IE versteht diese Abfragen nicht, aber es muss nicht: Wir werden es verwenden, um das Raster zu beheben!

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>

kümmern wir uns nun um die Sponsor -Artikel und fügen Sie für jeden Block einen Top -Rand hinzu:

<span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

Wir brauchen keinen Top -Rand, wenn das Raster unterstützt wird. Nehmen Sie es daher in der Abfrage @Supports an:

<span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>

Fügen wir schließlich eine gewisse Reaktionsfähigkeit für den IE hinzu. Wir werden einfach den Hauptinhalt, die Seitenleiste und jeden Sponsor auf kleinere Bildschirme auf die volle Breite strecken:

<span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>

Vergessen Sie nicht, die Breite des Sponsors für die Browser zu beheben, die das Netz unterstützen:

<span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>

So sieht das Layout jetzt im Internet Explorer aus:

Sie können das Endergebnis auf CodePen anzeigen:

Siehe das Layout für Pen SP: Multi-Säulen-Layout mit Grid von SitePoint (@sinepoint) auf CodePen.

Schlussfolgerung

In diesem Artikel haben wir CSS-Netze in Aktion gesehen und es verwendet, um ein vorhandenes Float-basierter Layout neu zu gestalten. Wenn wir diese beiden Lösungen vergleichen, können wir sehen, dass der HTML- und CSS -Code der „Gitter“ -Lösung kleiner ist (natürlich nicht die Fallbacks zählen), einfacher und ausdrucksstärker. Mit Hilfe der Immobilie des Gitter-Template-Bereichs ist es leicht zu verstehen, wie einzelne Bereiche angelegt werden, und wir können sie schnell neu positionieren oder ihre Größen anpassen. Darüber hinaus müssen wir uns nicht auf verschiedene hackige Tricks wie ClearFix verlassen.

Wie Sie sehen, ist CSS-Gitter eine großartige Alternative zu Floats und es ist sehr produktionsbereit. Möglicherweise müssen Sie einige Fallback -Regeln für den Internet Explorer vorlegen (der eine ältere Version der Spezifikation implementiert), aber wie Sie gesehen haben Alles.

Haben Sie bereits versucht, Websites mit CSS Grid zu erstellen? Was sind deine Eindrücke? Teile deine Gedanken in den Kommentaren!

häufig gestellte Fragen zum CSS -Raster -Nachrüst

Welche Bedeutung hat das CSS -Raster -Nachrüst im Webdesign? Es ist ein zweidimensionales System, dh es kann sowohl Spalten als auch Zeilen verarbeiten, im Gegensatz zu Flexbox, das größtenteils ein eindimensionales System ist. Dies macht es zu einem vielseitigen Tool zum Erstellen reaktionsschneller Designs, die sich an verschiedene Bildschirmgrößen und -auflösungen anpassen. Es vereinfacht auch den Prozess der Ausrichtung und Verteilung von Raum zwischen Elementen in einem Behälter, selbst wenn ihre Größe unbekannt oder dynamisch ist. Die Nachrüstung hebt sich aufgrund ihrer Flexibilität und Benutzerfreundlichkeit von anderen Netzsystemen ab. Im Gegensatz zu anderen Systemen, die umfangreiche Codierung und Berechnungen erfordern, ermöglicht CSS Grid Retrofit es Entwicklern, komplexe Layouts mit minimalem Code zu erstellen. Es bietet auch mehr Kontrolle über die Platzierung und Ausrichtung von Elementen, was es für viele Entwickler zu einer bevorzugten Wahl macht. ist ein hervorragendes Werkzeug zum Erstellen von mobilen reaktionsschnellen Designs. Es ermöglicht Entwicklern, verschiedene Netzlayouts für verschiedene Bildschirmgrößen mithilfe von Medienabfragen zu definieren. Dies bedeutet >

CSS -Gittergeräte ist mit den meisten modernen Browsern kompatibel, darunter Chrom, Firefox, Safari und Rand. Es funktioniert jedoch möglicherweise nicht wie erwartet in älteren Browsern oder Versionen. Es ist immer eine gute Praxis, Ihr Design in mehreren Browsern zu testen, um sicherzustellen, dass es wie beabsichtigt funktioniert.

Wie kann ich in meinen Projekten anfangen, CSS -Raster -Nachrüstungen zu verwenden? Dann können Sie die Säule- und Zeilengrößen mit Raster-Template-Säulen und Raster-Template-Reihen definieren und ihre untergeordneten Elemente mit Raster-Spalte und Gitterreihe in das Raster legen.

Kann ich CSS kombinieren Raster -Nachrüstung mit anderen Layout -Methoden? Dies kann besonders nützlich sein, wenn Sie ein Layout erstellen möchten, das teilweise flexibel und teilweise festgelegt ist. Retrofit inklusive Verwendung benannter Gitterbereiche für eine einfachere Layout -Verwaltung, die Verwendung der FR -Einheit für flexible Rasterspuren und die Verwendung des Gitterinspektors in den Entwickler -Tools Ihres Browser Elemente?

CSS Grid Retrofit ermöglicht die Überlappung von Elementen, was ein leistungsstarkes Werkzeug zum Erstellen von einzigartigen Layouts sein kann. Sie können die Stapelreihenfolge überlappender Elemente mit der Z-Index-Eigenschaft steuern. Das heißt, es kann beide Spalten und Zeilen verarbeiten. Dies macht es zu einem vielseitigen Werkzeug, um sowohl horizontale als auch vertikale Layouts zu erstellen. Probleme mit dem Browser -Kompatibilität, Umgang über überschneidende Elemente und die Verwaltung komplexer Layouts mit vielen Gitterbereichen. Mit der Praxis und einem guten Verständnis der Gittereigenschaften können diese Herausforderungen überwunden werden.

Das obige ist der detaillierte Inhalt vonNeugestaltung einer Site für die Verwendung von CSS -Netzlayout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!