Joomla 4中最重要的变化之一是从Bootstrap 2升级到Bootstrap4。但是，我们发现的一件事是Joomla 4不会完全依赖Bootstrap。

Joomla 4也将依靠CSS Grid Layout，这是一种正在改变前端Web设计行业的CSS方法。

Bootstrap 4和CSS Grid Layout将是Joomla 4中用于前端设计的工具。Joomla将依靠Bootstrap 4来提供用户界面，而CSS Grid则用于前端布局。Joomla团队之所以做出此更改，是因为他们相信CSS Grid将更加适合未来。在Joomla 3中，它们被锁定在旧版本的Bootstrap中。希望这种新方法可以避免Joomla 4出现类似问题。

Bootstrap 2与Bootstrap 4
总而言之，Boostrap 2与Boostrap 4的意思是：float 和 flex 来构建布局。在讨论CSS Grid之前，让我们比较一下Joomla的两个Bootstrap版本：

• Joomla 3支持Bootstrap 2
• Joomla 4将支持Bootstrap 4

CSS网格布局
CSS网格布局是所有主要浏览器支持的网格布局系统，在构建布局时会扭曲我们众所周知的方法。CSS Grid不是框架。

在使用Bootstrap（以及其他常见的CSS框架）时，创建列和行的常见方法是在HTML标记中调用CSS类，以定义哪些元素是行，如果使用列，则定义每个元素的大小。

CSS网格布局以相反的方式工作。您可以使用更简洁的HTML标记，并通过CSS来确定哪些元素是行，列和大小。flex CSS属性也没有浮动。

• grid-template-columns：列数以及每列的宽度。两列，两者均为50％宽度。
• grid-template-rows：每行的高度。在这种情况下为100像素。
• display使用“grid”作为值的属性将子div定义.container为布局元素。

使用CSS网格布局的优势
我看到CSS网格比Bootstrap具有以下两个主要优点：

• 更简单的HTML。 您可以编写更少的HTML并生成通常与Bootstrap 4或其他CSS框架相同的结果。
• 通过CSS在设计中进行更多控制。即使我们知道CSS负责设计，框架也要求我们也依赖HTML标记。CSS Grid通过减少对HTML标记输出的CSS类的依赖来更好地控制设计。

Grid不需要大量的CSS和JS，因为它是Web平台本身的一部分。这意味着您可以在速度较慢的连接（3G或更慢的速度）上节省80％的页面加载时间，从而加载成功Joomla网站。