jQuery MagicGrid是一種非常方便的前端庫，讓網頁排版變得十分簡單。MagicGrid幫助你將內容自動以卡片的形式排列，所以你在開發響應式網頁時可以省去很多麻煩。

<!-- 引入jQuery和MagicGrid -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/e-oj/Magic-Grid/magic-grid.js"></script>
<!-- HTML -->
<div id="magic-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
<!-- JavaScript -->
<script>
var magicGrid = new MagicGrid({
container: '#magic-grid',
static: true,
animate: true,
gutter: 10,
maxColumns: 3,
useMin: true
});
magicGrid.listen(); // 開始排版
</script>

在這段代碼中，我們首先引入了jQuery和MagicGrid庫。然后我們在HTML中創建了一個id為"magic-grid"的div，其中包含三個class為"card"的div，分別用來表示卡片。在JavaScript中，我們初始化了一個MagicGrid對象，并且在MagicGrid中定義了一些參數來控制排版。這些參數包括容器，是否使用靜態布局，是否啟用動畫效果，卡片之間的間距，最大列數等等。最后我們調用了listen方法開啟了排版。

總的來說，jQuery MagicGrid是一個非常方便的庫，可以讓你輕松地在網頁上實現卡片式布局。在響應式設計中，它也十分重要，你可以根據窗口大小自動調整布局，避免頁面擠壓或者卡片失真的問題。MagicGrid還有很多功能，可以通過閱讀官方教程來更好地掌握它的用法。