Vorwort
Das Layout früherer HTML-Seiten wurde im Wesentlichen über Flexbox implementiert, mit dem komplexe Weblayouts problemlos gelöst werden können. Jetzt gibt es einen neuen Anwärter auf die Entwicklung des besten Layoutsystems für HTML. Es handelt sich um ein leistungsstarkes CSS-Grid-Layout.
Was ist der Unterschied zwischen Grid und Flex? Für welches Szenario ist es geeignet?
- Flexbox ist ein eindimensionales Layoutsystem, das sich für Teillayouts wie Navigationsleistenkomponenten eignet.
- Grid ist ein zweidimensionales Layoutsystem, das normalerweise zur Planung der gesamten Seite verwendet wird.
- Hinsichtlich der Anwendungsszenarien stehen beide nicht im Widerspruch. Obwohl Flexbox auch für große Seitenlayouts verwendet werden kann, ist es nicht so leistungsstark und flexibel wie Grid. Beides zu kombinieren ist einfacher.
Merkmale:
- feste und flexible Spurgrößen;
- Elemente können mithilfe von Zeilennummern, Namen oder durch Positionierung von Rasterbereichen an präzisen Positionen im Raster platziert werden.
- Mehrere Elemente können in einer Rasterzelle oder einem Rasterbereich platziert werden und sich teilweise überlappen.
Mangel:
Die Kompatibilität ist relativ schlecht.
Zeichne einfach ein Bild:
Flex-Layout:
Gitterstruktur:
Rasterspalte
Die vertikale Linienausrichtung von Rasterelementen wird als Spalten bezeichnet.
Rasterreihe
Die horizontale Linienrichtung von Rasterelementen wird als Reihe bezeichnet.
Rasterabstand
Der Rasterabstand bezieht sich auf den Rasterhorizontalabstand oder den Rastervertikalabstand zwischen zwei Rastereinheiten.
Mit den folgenden Eigenschaften können wir die Größe der Lücke zum Element anpassen
- Gitter-Spalten-Lücke
- Gitter-Zeilen-Lücke
- Gitterlücke
Das zuvor verwendete Flex-Layout kann jeweils nur das Layout von Elementen in einer Dimension, einer Zeile oder einer Spalte verarbeiten.
Und jetzt kann das Rasterlayout (Gitterlayout) die Position eines Containers freier festlegen
Zum Beispiel:
Wenn Sie das Flex-Layout verwenden, um die Satzmethode zu implementieren, müssen Sie viele Divs verschachteln, um sie Stück für Stück zu unterscheiden
Wenn Sie nun das Rasterlayout verwenden, können Sie viele Div-Layouts speichern und die Positionen der Elemente direkt unterscheiden
Einfaches Beispiel:
Verwenden Sie das Rasterlayout, um den Satz in der Abbildung zu realisieren:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>grid</title>
<style>
body {
width: 90%;
max-width: 900px;
margin: 2em auto;
font: .9em/1.2 Arial, Helvetica, sans-serif;
}
.container > div {
border-radius: 5px;
padding: 10px;
background-color: rgb(232, 66, 152);
}
.container{
display:grid;
gap:20px;
grid-template-columns:1fr 2fr 1fr ;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>Wir müssen nur das Attribut display:grid; zum übergeordneten Element hinzufügen, und die untergeordneten Elemente darunter ändern sich entsprechend
fr: Es handelt sich um ein exklusives Attribut im Rasterlayout, das zur gleichmäßigen Verteilung des Containerraums verwendet wird
Beispiel:
Wie in der Abbildung gezeigt, ist es relativ mühsam, diese Layoutmethode mithilfe eines elastischen Layouts zu implementieren, aber es ist viel einfacher, wenn wir ein Rasterlayout verwenden
Code wie folgt anzeigen:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Grid</title>
<style>
body {
width: 90%;
max-width: 900px;
margin: 2em auto;
font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}
.container {
display: grid;
grid-template-columns: 1fr 3fr;
/* fr单位是frid布局专用的长度单位，可以平均的区分配每个容器所站的位置 */
/* 每列改怎么去分配位置，例如菜单和内容区，side（这里定义的是菜单，那么他就占用1fr的位置，content（内容）他占3fr的位置，所以在图中我们可以看到内容区要比菜单区域更宽一些） */
gap: 20px;
grid-template-areas:'header header'/* header就是头部 */
'side content'/* side菜单，content内容 */
'footer footer'/* footer底部 */
;
}
/* 给每个容器设置一个名称 */
header{
grid-area:header;
}
footer{
grid-area:footer;
}
aside{
grid-area:side;
}
article{
grid-area:content;
}
header,
footer {
border-radius: 5px;
padding: 10px;
background-color: rgb(173, 202, 232);
border: 1px solid #000;
}
aside,article {
border: 1px solid #999;
}
</style>
</head>
<body>
<div class="container">
<header>这是头部导航</header>
<article>
<h1>这里内容区域</h1>
<p>
内容1
</p>
<p>
内容2
</p>
</article>
<aside>
<h2>这里是左侧菜单区域</h2>
<p>
菜单
</p>
</aside>
<footer>这里是底部</footer>
</div>
</body>
</html>Eigenschaften des Rasterlayouts:
Sehen Sie sich ein Tutorial an: Rasterlayout
Zusammenfassen:
Das Grid-Layout ähnelt in gewisser Weise dem Flex-Layout, bei dem beide die Positionen mehrerer Elemente innerhalb des Containers angeben können. Allerdings weisen sie auch große Unterschiede auf.
Grid kann Dinge, die Flexbox nicht kann. Flexbox ist kompatibler als Grid und sie können zusammenarbeiten. Ein Rasterelement kann zu einem Flexbox-Container werden, und ein Flexelement kann zu einem Rastercontainer werden.
Sie können das entsprechende Layout entsprechend den Anforderungen des Geschäftsszenarios auswählen.