Flexbox布局（Flexible Box)模塊旨在提供一個更加有效的方式制定、調整和分布一個容器里的項目布局（基於一維），即使他們的大小是未知或者是動態的。（這里我們稱為Flex）。
Flex布局主要思想是讓容器有能力讓其子項目能夠改變其寬度、高度(甚至順序)，以最佳方式填充可用空間（主要是為了適應所有類型的顯示設備和屏幕大小）。Flex容器會使子項目（伸縮項目）擴展來填滿可用空間，或縮小他們以防止溢出容器。
最重要的是，Flexbox布局方向不可預知，他不像常規的布局（塊就是從上到下，內聯就從左到右）。而那些常規的適合頁面布局，但對於支持大型或者雜的應用程序（特別是當他涉及到取向改變、縮放、拉伸和收縮等）就缺乏靈活性.
CSS Grid布局 （又名"網格"），是一個基於二維網格布局的系統，主要目的是改變我們基於網格設計的用戶接口方式。如我們所知，CSS 總是用於網頁的樣式設置，但它並沒有起到很好的作用。剛開始的時候我們使用表格(table)，然后使用浮動(float)、 定位(position)和內聯塊(inline-block)，但所有這些方法本質上來講都是hacks，存留了很多需要實現的重要功能問題(例如，垂直居中)。雖然Flexbox可以起到一定的補救作用，但是它只可以實現簡單的一維布局，並不適用於復雜的二維布局(實際上 Flexbox 和 Grid 可以一起結合使用起到最佳效果)。網格是 CSS 第一次專門創建的模塊，用來解決我們之前在制作網站時使用hacks處理布局問題。
網絡布局可以將應用程序分割成不同的空間，或者定義他們的大小、位置以及層級。就像表格一樣，網格布局可以讓Web設計師根據元素按列或行對齊排列，但他和表格不同，網格布局沒有內容結構，從而使各種布局不可能與表格一樣。例如，一個網格布局中的子元素都可以定位自己的位置，這樣他們可以重疊和類似元素定位。
此外，沒有內容結構的網格布局有助於使用流體、調整順序等技術管理或更改布局。通過結合CSS的媒體查詢屬性，可以控制網格布局容器和他們的子元素，使用頁面的布局根據不同的設備和可用空間調整元素的顯示風格與定位，而不需要去改變文檔結構的本質內容。
