Kernpunkte
grid-column und grid-row zum Lokalisieren von Rasterelementen sowie Eigenschaften wie justify-items, align-items und align-self, um Elemente auszurichten und anzupassen. Es ermöglicht auch verschachtelte Gitter, bei denen das Gitterkindselement selbst Gitterbehälter sein kann. In diesem Artikel wird angezeigt, wie ein reaktionsschnell modernes CSS -Gitterlayout erstellt wird, wie man den Fallback -Code für ältere Browser verwendet, wie man CSS -Gitterschritt Schritt für Schritt hinzufügt und wie das Layout auf kleinen Geräten wieder aufgebaut ist und das Zentrum von Alignment -Attribut -Zentren verwendet wird Elemente.
In früheren Artikeln haben wir vier verschiedene Techniken untersucht, um problemlos reaktionsschnelle Gitterlayouts zu erstellen. Dieser Beitrag wurde im Jahr 2014 geschrieben - bevor CSS Grid verfügbar war -. In diesem Tutorial werden wir also eine ähnliche HTML -Struktur verwenden, jedoch mit einem modernen CSS -Netzlayout.
In diesem Tutorial werden wir Float verwenden, um eine Demo mit einem einfachen Layout zu erstellen und sie dann mit CSS -Gitter zu verbessern. Wir werden viele nützliche Versorgungsunternehmen wie zentrierende Elemente, Spannprojekte und leicht ändernde Layouts auf kleinen Geräten demonstrieren, indem wir Gitterbereiche neu definieren und Medienabfragen verwenden. Sie finden den Code in diesem CodePen: codePen Link
reaktionsschnell modernes CSS -Gitter -Layout
Bevor wir in die Erstellung einer reaktionsschnellen Gitterdemonstration eingehen, führen wir zunächst CSS -Netz ein.
CSS-Gitter ist ein leistungsstarkes zweidimensionales System, das 2017 den meisten modernen Browsern hinzugefügt wurde. Es ändert die Art und Weise, wie wir HTML -Layouts erstellen. Mit dem Gitterlayout können wir Gitterstrukturen in CSS erstellen, nicht in HTML.
Zusätzlich zu IE11 unterstützen die meisten modernen Browser CSS -Netz. Sie können Caniuse.com verwenden, um den Support zu überprüfen.
Das Gitterlayout hat einen übergeordneten Container, dessen display Eigenschaft auf grid oder inline-grid eingestellt ist. Die Kinderelemente des Behälters sind Gitterartikel und sind aufgrund des leistungsstarken Gitteralgorithmus implizit gelegen. Sie können auch verschiedene Klassen anwenden, um die Platzierung, Größe, Position und andere Aspekte des Projekts zu steuern.
Beginnen wir mit einer grundlegenden HTML -Seite. Erstellen Sie eine HTML -Datei und fügen Sie Folgendes hinzu:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2>CSS Grid Layout Example</h2>
</header>
<aside class="sidebar">
<p>Sidebar</p>
</aside>
<main>
<article>1</article>
<article>2</article>
<article>11</article>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html> Wir verwenden die HTML -Semantik, um die Teile der Titel, die Seitenleiste, die Körper- und Fußzeile einer Seite zu definieren. Im Hauptabschnitt verwenden wir das <article> -Tag, um eine Reihe von Elementen hinzuzufügen. <article> ist ein HTML5-Semantik-Tag, mit dem unabhängige und in sich geschlossene Inhalte eingewickelt werden können. Eine einzelne Seite kann eine beliebige Anzahl von <article> Tags enthalten.
Dies ist in dieser Phase ein Screenshot der Seite:
Nächst den grundlegenden CSS -Stil hinzufügen. Fügen Sie am Kopf des Dokuments ein <style> Tag hinzu und fügen Sie den folgenden Stil hinzu:
body {
background: #12458c;
margin: 0rem;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
header {
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
color: #fff;
border-style: solid;
border-width: 2px;
}
aside {
color: #fff;
border-width:2px;
border-style: solid;
float: left;
width: 6.3rem;
}
footer {
color: #fff;
border-width:2px;
border-style: solid;
clear: both;
}
main {
float: right;
width: calc(100% - 7.2rem);
padding: 5px;
background: hsl(240, 100%, 50%);
}
main > article {
background: hsl(240, 100%, 50%);
background-image: url('https://source.unsplash.com/daily');
color: hsl(240, 0%, 100%);
border-width: 5px;
}Dies ist eine kleine Demo -Seite, daher stylen wir die Tags direkt zur Lesbarkeit, anstatt das Namensnamensystem anzuwenden.
Wir verwenden Float, um die Seitenleiste nach links zu positionieren, den Hauptkörper nach rechts zu positionieren und die Breite der Seitenleiste auf eine feste 6.3rem Breite einzustellen. Anschließend berechnen und setzen wir die verbleibende Breite des Körperteils unter Verwendung der CSS calc() -Funktion. Der Hauptteil enthält eine Bibliothek von Projekten, die in vertikale Blöcke organisiert sind.
Das Layout ist nicht perfekt. Zum Beispiel unterscheidet sich die Höhe der Seitenleiste von der Höhe des Hauptinhaltsabschnitts. Es gibt verschiedene CSS -Techniken, die diese Probleme lösen können, aber die meisten sind Tipps oder Problemumgehungen. Da dieses Layout ein Fallback für das Netz ist, wird es immer weniger Benutzer gesehen. Der Fallback ist verfügbar und gut genug.
Die neuesten Versionen von Chrome, Firefox, Edge, Opera und Safari unterstützen das CSS -Netz. Wenn Ihre Besucher diese Browser verwenden, müssen Sie sich keine Sorgen um die Bereitstellung von Fallbacks machen. Sie müssen auch den Evergreen -Browser in Betracht ziehen. Die neuesten Versionen von Chrome, Firefox, Edge und Safari sind immergrüne Browser. Das heißt, sie werden sich automatisch und stillschweigend selbst aktualisieren, ohne den Benutzer aufzufordern. Um sicherzustellen, dass Ihr Layout in jedem Browser ordnungsgemäß funktioniert, können Sie mit einem schwimmenden Standardfall-Fallback beginnen und dann mit progressiven Verbesserungstechniken moderne Netzlayouts anwenden. Benutzer, die ältere Browser verwenden, werden nicht die gleiche Erfahrung erhalten, aber das ist gut genug.
Progressive Verbesserung: Sie müssen nicht alles abdecken
Wenn Sie ein CSS -Gitterlayout über ein Fallback -Layout hinzufügen, müssen Sie nicht wirklich alle Tags überschreiben oder einen völlig separaten CSS -Stil verwenden:
float: left|right -Stil), einen display: grid -Stil hinzufügen, wird der Schwimmer ignoriert und das Raster wird genommen. @supports -Block ignorieren. @supports
als Gitterbehälter und stellen Sie die Gittersäulen, Zeilen und Regionen ein: <body>
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2>CSS Grid Layout Example</h2>
</header>
<aside class="sidebar">
<p>Sidebar</p>
</aside>
<main>
<article>1</article>
<article>2</article>
<article>11</article>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html>, um display:grid als Gitterbehälter zu markieren. Wir setzen eine Gitterlücke von 0,1 VW. Mit GAP können Sie Slots zwischen Gitterzellen erstellen, anstatt Ränder zu verwenden. Wir fügen auch zwei Spalten mit <body> hinzu. In der ersten Spalte wird eine feste Breite von 6,5 REM angewendet, und die zweite Spalte nimmt eine Restbreite an. grid-template-columns ist eine fraktionelle Einheit, und 1FR entspricht einem Teil des verfügbaren Raums. fr
, um drei Zeilen hinzuzufügen. Die erste Zeile verwendet eine feste Höhe von 6REM, die dritte Zeile verwendet eine feste Höhe von 3REM, und der verbleibende freie Speicherplatz (1FR) wird der zweiten Reihe zugeordnet. grid-template-rows
, um die virtuellen Zellen zuzuweisen, die durch den Schnittpunkt von Spalten und Zeilen der Region erzeugt werden. Jetzt müssen wir grid-template-areas verwenden, um die in der Flächenvorlage angegebenen Bereiche tatsächlich zu definieren: grid-area
body {
background: #12458c;
margin: 0rem;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
header {
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
color: #fff;
border-style: solid;
border-width: 2px;
}
aside {
color: #fff;
border-width:2px;
border-style: solid;
float: left;
width: 6.3rem;
}
footer {
color: #fff;
border-width:2px;
border-style: solid;
clear: both;
}
main {
float: right;
width: calc(100% - 7.2rem);
padding: 5px;
background: hsl(240, 100%, 50%);
}
main > article {
background: hsl(240, 100%, 50%);
background-image: url('https://source.unsplash.com/daily');
color: hsl(240, 0%, 100%);
border-width: 5px;
}, was die verbleibende Breite des Körperteils nach Abzug der Breite der Seitenleiste plus einem Rand/Füllraum berechnet. width: calc(100% - 7.2rem);
hinzufügen: width: auto;
body {
/*...*/
display: grid;
grid-gap: 0.1vw;
grid-template-columns: 6.5rem 1fr;
grid-template-rows: 6rem 1fr 3rem;
grid-template-areas: "header header"
"sidebar content"
"footer footer";
}
hinzufügen
Das Grid Child Element selbst kann ein Gitterbehälter sein. Setzen wir den Hauptteil als Gitterbehälter ein:<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2>CSS Grid Layout Example</h2>
</header>
<aside class="sidebar">
<p>Sidebar</p>
</aside>
<main>
<article>1</article>
<article>2</article>
<article>11</article>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html> Wir verwenden einen Gitterlücken von 0,1 VW und die repeat(auto-fill, minmax(12rem, 1fr)); -Funktion, um Spalten und Zeilen zu definieren. Die Option auto-fill versucht, den freien Speicherplatz mit möglichst vielen Spalten oder Zeilen wie möglich zu füllen, und erstellt bei Bedarf eine implizite Spalte oder Zeile. Wenn Sie die verfügbaren Spalten oder Zeilen in den verfügbaren Speicherplatz einfügen möchten, müssen Sie auto-fit verwenden. Lesen Sie eine gute Erklärung über den Unterschied zwischen auto-fill und auto-fit.
Dies ist ein Screenshot des Ergebnisses:
Grid grid-column, grid-row und span Schlüsselwörter
CSS -Gitter liefert grid-column und grid-row, mit denen Sie Gitterelemente innerhalb des übergeordneten Netzes mit Gitterlinien lokalisieren können. Sie sind Abkürzung für die folgenden Eigenschaften:
grid-row-start: Geben Sie die Startposition des Netzelements in der Rasterreihe grid-row-end: Geben Sie die Endposition des Netzelements in der Rasterreihe grid-column-start: Geben Sie die Startposition des Netzelements in der Gitterspalte grid-column-end: Geben Sie die Endposition des Netzelements in der Gitterspalte Sie können auch das Schlüsselwort span verwenden, um anzugeben, wie viele Spalten oder Zeilen Sie erstrecken sollen.
Lassen Sie uns das zweite untergeordnete Element der Hauptfläche von vier Spalten und zwei Zeilen erstrecken und es aus der zweiten Spalte und der ersten Zeile positionieren (die auch die Standardposition ist):
body {
background: #12458c;
margin: 0rem;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
header {
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
color: #fff;
border-style: solid;
border-width: 2px;
}
aside {
color: #fff;
border-width:2px;
border-style: solid;
float: left;
width: 6.3rem;
}
footer {
color: #fff;
border-width:2px;
border-style: solid;
clear: both;
}
main {
float: right;
width: calc(100% - 7.2rem);
padding: 5px;
background: hsl(240, 100%, 50%);
}
main > article {
background: hsl(240, 100%, 50%);
background-image: url('https://source.unsplash.com/daily');
color: hsl(240, 0%, 100%);
border-width: 5px;
}Dies ist ein Screenshot des Ergebnisses:
Verwenden des Netzwerks für das Netz aus Alignment
Wir möchten den Text im Titel, die Seitenleiste und die Fußzeile sowie die Zahlen im <article> -Element zentrieren.
CSS -Gitter liefert sechs Eigenschaften justify-items, align-items, justify-content, align-content, justify-self, align-self,
, mit der Gitterelemente ausgerichtet und angepasst werden können . Sie sind tatsächlich Teil des CSS -Box -Ausrichtungsmoduls. header
aside Fügen Sie Folgendes in die article, footer,
body {
/*...*/
display: grid;
grid-gap: 0.1vw;
grid-template-columns: 6.5rem 1fr;
grid-template-rows: 6rem 1fr 3rem;
grid-template-areas: "header header"
"sidebar content"
"footer footer";
}justify-items
align-items
start end Richten Sie die Gitterelemente entlang der Säulenachse oder vertikale Richtung aus. Sie können alle center, stretch,
Dies ist ein Screenshot nach dem Zentrierungselement: 
<🎜> Das Netzlayout in kleinen Geräten <🎜> wieder aufbauen <🎜>
Unser Demo -Layout ist für mittlere und große Bildschirme praktisch, ist jedoch möglicherweise nicht der beste Weg, um eine Seite für kleine Bildschirmgeräte zu erstellen. Mit CSS Grid können wir diese Layoutstruktur leicht ändern, um sie in kleinen Geräten linearisieren, indem wir den Netzbereich neu definieren und Medienabfragen verwenden.
Hier ist ein Screenshot, bevor der Code hinzugefügt wird, um das Layout auf einem kleinen Gerät wieder aufzubauen:
Fügen Sie jetzt den folgenden CSS -Code hinzu:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2>CSS Grid Layout Example</h2>
</header>
<aside class="sidebar">
<p>Sidebar</p>
</aside>
<main>
<article>1</article>
<article>2</article>
<article>11</article>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html>auf Geräten mit Breiten von weniger als 575 Pixel wird das Layout linear:
Beachten Sie, dass die Breite der Seitenleiste die verfügbare Breite nicht füllt. Dies wird durch den Fallback-Code verursacht. Alles, was wir tun müssen
width: auto;
width: 6.3rem; Dies ist ein Screenshot des Endergebnisses:
body {
background: #12458c;
margin: 0rem;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
header {
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
color: #fff;
border-style: solid;
border-width: 2px;
}
aside {
color: #fff;
border-width:2px;
border-style: solid;
float: left;
width: 6.3rem;
}
footer {
color: #fff;
border-width:2px;
border-style: solid;
clear: both;
}
main {
float: right;
width: calc(100% - 7.2rem);
padding: 5px;
background: hsl(240, 100%, 50%);
}
main > article {
background: hsl(240, 100%, 50%);
background-image: url('https://source.unsplash.com/daily');
color: hsl(240, 0%, 100%);
border-width: 5px;
}
Sie können den endgültigen Code im CodePen finden, der zu Beginn dieses Artikels angezeigt wird, oder direkt auf CodePen zugreifen: 
codePen Link
In diesem Tutorial haben wir ein reaktionsschnelles Demo -Layout mit CSS -Raster erstellt. Wir zeigen, dass der Fallback-Code für ältere Browser, Schritt-für-Schritt-CSS-Raster, das Layout in kleinen Geräten wieder aufgebaut und die Elemente des Alignment-Attributs wieder aufgebaut wird.
FAQs über einfache und reaktionsschnelle moderne CSS -Gitterlayouts
Was ist der Unterschied zwischen CSS -Netz und Flexbox?
CSS -Gitter und Flexbox sind beide leistungsstarke Layoutsysteme in CSS. Während sie in einigen Fällen austauschbar verwendet werden können, haben sie jeweils ihre eigenen einzigartigen Vorteile. Flexbox ist ein eindimensionales Layoutmodell, das besonders zum Zuweisen von Elementen entlang von Spalten oder Zeilen geeignet ist. CSS Grid hingegen ist ein zweidimensionales Layout-System, das ideal zum Anordnen von Elementen in Zeilen und Säulen gleichzeitig ist. Es eignet sich perfekt zum Erstellen komplexer Weblayouts.CSS -Gitter erleichtert es einfach, reaktionsschnelle Layouts ohne Medienfragen zu erstellen. Sie können
fr Kann ich CSS -Raster und Flexbox zusammen verwenden? grid-template-columns: 1fr 1fr 1fr
CSS -Gitter liefert mehrere Eigenschaften zum Ausrichten von Elementen, einschließlich justify-items, align-items, justify-self und align-self. Diese Eigenschaften können verwendet werden, um Elemente entlang der Zeilenachse (Ausrichtung) oder Säulenachse (Ausrichtung) auszurichten. Zum Beispiel zentriert justify-items: center das Element entlang der Leitungsachse.
Sie können die Eigenschaft grid-gap verwenden, um Lücken zwischen Rasterelementen zu erstellen. Diese Eigenschaft ist die Abkürzung für grid-row-gap und grid-column-gap. Zum Beispiel erzeugt grid-gap: 20px eine 20px -Lücke zwischen allen Gitterelementen.
auto-fill und auto-fit in CSS -Netz? auto-fill und auto-fit werden mit den Funktionen grid-template-columns in den Eigenschaften grid-template-rows und repeat() verwendet. auto-fill Verwenden Sie so viele Elemente wie möglich, um Zeilen oder Spalten zu füllen, und erstellen Sie leere Zellen, wenn nicht genügend Elemente vorhanden sind. auto-fit verhält sich ähnlich, aber es kollabiert leere Zellen, wodurch der Element dehnt wird, um die Zeile oder Spalte zu füllen.
In CSS -Gitter können Sie Elemente überlappen, indem Sie Elemente in derselben Gitterzelle platzieren oder mehrere Zellen umfassen. Sie können das Attribut z-index verwenden, um die Stapelreihenfolge überlappender Elemente zu steuern.
CSS -Gitter wird von allen modernen Browsern wie Chrome, Firefox, Safari und Edge unterstützt. Internet Explorer unterstützt es jedoch nicht. Wenn Sie Internet Explorer unterstützen müssen, müssen Sie möglicherweise ein Fallback -Layout verwenden.
Sie können verschachtelte Maschen erstellen, indem Sie das Netzelement selbst als Netzbehälter festlegen. Wenden Sie einfach display: grid auf Ihr Netzprojekt an und definieren Sie das Netzlayout wie Sie für jeden Rasterbehälter.
Sie können die Eigenschaften grid-template-rows und grid-template-columns verwenden, um die Größe der Gitterspur (Zeilen und Spalten) zu steuern. Sie können Größen mit verschiedenen Einheiten angeben, z. B. Pixel (PX), Prozentsätze (%) oder Fraktionen (FR).
Bitte beachten Sie, dass der obige Inhalt den Originaltext erheblich neu geschrieben und poliert hat und sich bemüht hat, den Artikel reibungsloser, leichter zu lesen, und mehr im Einklang mit dem Schreibstil moderner Online -Artikel, ohne die ursprüngliche Bedeutung zu ändern. Das Bildformat bleibt gleich. Der CodePen -Link ist nicht verfügbar, da es nicht in der Lage ist, auf externe Websites und Dateien zuzugreifen. Bitte ersetzen Sie es selbst.
Das obige ist der detaillierte Inhalt vonEinfach und reaktionsschnell modernes CSS -Gitter -Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Welche fünf Arten von Aggregatfunktionen gibt es?
WPS-Ersatz-Tastenkombinationen
Fehler beim Herstellen der Verbindung zum Apple-ID-Server
So beheben Sie den Bluescreen 0x0000006b
So verkaufen Sie LUNA-Münzen
Gängige Methoden zur Erkennung von Website-Schwachstellen
Zusammenfassung des Firefox-Browser-Plug-ins
So installieren Sie WordPress nach dem Herunterladen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
