Eine kurze Diskussion darüber, warum sich CSS-Raster besser zum Erstellen von Layouts eignet als Bootstrap

Warum ist CSS Grid besser für das Layout als Bootstrap? In diesem Artikel werden Ihnen die Gründe vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

CSS Grid ist eine brandneue Methode zum Erstellen von Layouts. Es ist das erste richtige Layoutsystem in der Geschichte und hat uns viele Vorteile gebracht. CSS Grid是一种全新的创建布局方式，这是有史以来第一次合适的布局系统，并且他是浏览器原生的，他给我们带来了很多好处。

当你和当今最流行的Bootstrap框架相比，grid的好处变的尤为清晰，您不仅可以创建在以前在不引入JavaScript的情况下无法实现的布局，而且您的代码将更易于维护和理解。

【相关推荐：《css视频教程》《bootstrap教程》】

本文中我会解释一下为什么。

标签会更加简洁

相比Bootstrap，使用grid会使你的HTML更加干净，虽然这不是最重要的好处，但它可能会是你第一个注意到的。

为了举例说明，我创建了一个布局，以便我们可以比较两个版本所需要的代码。

注意：我在给出的例子中稍微设计了一下，但是他和我们比较Bootstrap没有任何关系，所以我只保留布局部分的CSS

Bootstrap

先看一下Bootstrap需要创建的标签。

这里有两件事需要注意一下：

• 每个row都需要一个<div>标签<li>使用了class name来指定布局(<code>col-xs-2)

随着这种布局的复杂性增长，HTML也是如此。

如果这是个响应式网站，它会看起来更复杂：




现在我们来看一下用Grid布局：



我可以在这里使用语义化元素，但我还是使用div来和Bootstrap对比。

显然，grid用来布局看起来更简单，丑陋的类名和每行所需的额外的div标签一去不复返了，简简单单一个container和里面的item。

与Bootstrap不同的是，随着布局复杂度的增加，Grid布局标签的复杂度将不会增加太多。

Bootstrap示例不需要添加任何CSS，引用一下就可以了。CSS Grid肯定需要添加。具体来说，是这样的：




这可能是一些人赞成Bootstrap的一个论点：你不用关心CSS，只需要在HTML中定义布局。但是，正如你将会明白的那样，当涉及到灵活性的时候，标签和布局之间的耦合会变成一个很大的问题。

更灵活

假设您想要根据屏幕大小更改布局。 例如，将菜单拉到最上面一行，在移动设备上查看。

换句话说，布局从这样：



换成这样：



CSS Grid

用CSS Grid的话会非常简单，我们只需要添加一个media query，布局就像变魔术一样变成了你想要的。



你可以这样重新排列布局，不用担心HTML标签编写的顺序，这对开发人员和设计师都是很大的一个好处！

BootStrap

如果想在Bootstrap

Wenn Sie es mit dem heute beliebtesten Bootstrap-Framework vergleichen, werden die Vorteile von Grid besonders deutlich. Sie können nicht nur Layouts erstellen, die bisher ohne die Einführung von JavaScript nicht möglich waren, sondern auch Ihren Code einfacher umsetzen pflegen und verstehen. 🎜🎜[Verwandte Empfehlungen: „CSS-Video-Tutorial》《Bootstrap-Tutorial》]🎜🎜In diesem Artikel werde ich erklären, warum. 🎜

Das Etikett wird prägnanter sein

🎜Im Vergleich zu Bootstrap Durch die Verwendung eines Rasters wird Ihr HTML sauberer. Obwohl dies nicht der wichtigste Vorteil ist, ist es möglicherweise das Erste, was Ihnen auffällt. 🎜🎜Zur Veranschaulichung habe ich ein Layout erstellt, damit wir den für beide Versionen erforderlichen Code vergleichen können. 🎜🎜🎜

🎜Hinweis: Ich habe es im angegebenen Beispiel leicht gestaltet, aber es hat nichts mit unserem Vergleich Bootstrap zu tun, daher behalte ich nur das CSS des Layoutteils bei🎜

Bootstrap

🎜Schauen Sie zuerst Schauen wir uns die Tags an, die Bootstrap erstellen muss.
🎜🎜🎜🎜Hier sind zwei Dinge zu beachten: 🎜
• Jede Zeile erfordert ein <div>-Tag<li>Es wird mit dem Klassennamen Layout (col-xs-2)</li>🎜Mit zunehmender Komplexität dieses Layouts nimmt auch der HTML-Code zu. 🎜🎜Wenn dies eine responsive Website wäre, würde sie komplizierter aussehen:<br>🎜🎜<img src="https://img.php.cn/upload/image/166/897/428/162087144658504Eine%20kurze%20Diskussion%20dar%C3%BCber,%20warum%20sich%20CSS-Raster%20besser%20zum%20Erstellen%20von%20Layouts%20eignet%20als%20Bootstrap%20" title="162087144658504Eine kurze Diskussion darüber, warum sich CSS-Raster besser zum Erstellen von Layouts eignet als Bootstrap" alt="Eine kurze Diskussion darüber, warum sich CSS-Raster besser zum Erstellen von Layouts eignet als Bootstrap">🎜🎜Jetzt werfen wir einen Blick auf die Verwendung des Rasterlayouts: 🎜🎜<img src="https://img.php.cn/upload/image/587%20/748/926/162087154237642Eine%20kurze%20Diskussion%20dar%C3%BCber,%20warum%20sich%20CSS-Raster%20besser%20zum%20Erstellen%20von%20Layouts%20eignet%20als%20Bootstrap" title="162087154237642Eine kurze Diskussion darüber, warum sich CSS-Raster besser zum Erstellen von Layouts eignet als Bootstrap" alt="Eine kurze Diskussion darüber, warum sich CSS-Raster besser zum Erstellen von Layouts eignet als Bootstrap">🎜🎜Ich könnte hier semantische Elemente verwenden, aber ich verwende immer noch Divs, um den <code>BootstrapKontrast anzupassen . 🎜🎜Offensichtlich sieht das Rasterlayout einfacher aus. Es gibt keine hässlichen Klassennamen und die zusätzlichen div-Tags, die für jede Zeile erforderlich sind. 🎜🎜Im Gegensatz zu Bootstrap nimmt die Komplexität des Grid-Layout-Tags mit zunehmender Layoutkomplexität nicht wesentlich zu. 🎜🎜Für das Bootstrap-Beispiel muss kein CSS hinzugefügt werden, es reicht aus, es in Anführungszeichen zu setzen. CSS Grid muss unbedingt hinzugefügt werden. Konkret sieht es so aus:
  🎜🎜🎜🎜Dies könnte ein Argument sein, das manche Leute für Bootstrap vorbringen: Sie müssen sich nicht um CSS kümmern, Sie müssen nur das Layout in HTML definieren. Wie Sie jedoch verstehen werden, kann die Kopplung zwischen Etikett und Layout zu einem großen Problem in Bezug auf die Flexibilität werden. 🎜

  flexibler a>strong>

  🎜Angenommen, Sie möchten das Layout entsprechend der Bildschirmgröße ändern. Ziehen Sie das Menü beispielsweise in die oberste Zeile, um es auf Mobilgeräten anzuzeigen. 🎜🎜Mit anderen Worten, das Layout beginnt so: 🎜🎜🎜🎜Ersetzen Sie es wie folgt:🎜🎜🎜

  CSS Grid

  🎜Die Verwendung von CSS Grid wird sehr einfach sein, nur wir Sie müssen eine Medienabfrage hinzufügen, das Layout wird wie von Zauberhand zu dem, was Sie wollen. 🎜🎜🎜🎜du Auf diese Weise können Sie das Layout neu anordnen, ohne sich Gedanken über die Reihenfolge zu machen, in der HTML-Tags geschrieben werden. Dies ist ein großer Vorteil für Entwickler und Designer! 🎜

  BootStrap h2>🎜Wenn Sie dasselbe in Bootstrap tun möchten, müssen Sie den HTML-Code ändern und die Reihenfolge der Tags anpassen. 🎜

  

  Für diese Anforderung reicht es nicht aus, nur die Medienabfrage zu verwenden, Sie müssen auch JavaScript verwenden.

  Dieses Beispiel ist der größte Vorteil von Grid, den ich je erlebt habe

  Nicht mehr auf 12 Spalten beschränkt

  Das ist kein großes Problem, aber dieses Problem hat mich wegen Bootstrap ist in 12 Spalten unterteilt. Wenn Sie ein 5-Spalten-Layout wünschen, werden Sie verwirrt sein, oder 7 Spalten, 9 Spalten oder alles, was nicht in 12 Spalten zusammengefasst wird. <code>Bootstrap的grid系统分为了12列，如果你想要一个5列的布局就会纠结，或是7列、9列、任何不会合为12列的。

  CSS Grid就没有任何限制，你可以让grid正好有你想要的数量。这是一个7列的grid：

  

  通过设置grid-template-columns : repeat(7, 1fr)实现，就像这样：

  

  浏览器支持

  当然也必须讨论一下浏览器支持，在撰写本文的时候，全球75%的网站流量支持CSS Grid

  CSS Grid Es gibt keine Begrenzung, Sie können das Raster genau auf die gewünschte Zahl festlegen. Dies ist ein 7-Spalten-Raster:

  

  Erreicht durch die Einstellung von grid-template-columns: repeat(7, 1fr), etwa so:

  

  Browser-Unterstützung

  Natürlich müssen wir auch die Browser-Unterstützung besprechen, unter Zum Zeitpunkt des Schreibens unterstützen 75 % des weltweiten Website-Verkehrs CSS Grid

  🎜🎜🎜CSS Grid ist ein Layoutmodul, mit dem wir das Layout des Dokuments ändern können, ohne die Tag-Reihenfolge zu stören. Mit anderen Worten: Das CSS-Raster ist ein rein visuelles Werkzeug, das bei richtiger Verwendung keinen Einfluss auf die Ausdrucksweise des Dokumentinhalts haben sollte. Also: Die fehlende Unterstützung für CSS Grid in älteren Browsern hat keinen Einfluss auf das Besuchererlebnis, sondern macht das Erlebnis nur anders. 🎜🎜🎜Ursprüngliche Adresse: https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜