Joomla的未來是CSS網格，而不是Bootstrap 4

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網站。