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!