介紹了 juce::Rectangle 以及 juce::FlexBox 這兩個拉版工具後，這篇介紹 juce::Grid。Grid 跟 FlexBox 有相似處，各有優缺點，熟悉兩者後，視需求挑選。

延續前一篇範例，以 Grid 改寫如下：

void MainComponent::resized()
{
  const int kRowDistance = 10;
  const int kButtonDistance = 20;

  auto bounds = getLocalBounds().reduced(20, 10);
  auto first_row = bounds.removeFromTop(getLocalBounds().getHeight() * 0.2);

  // Caculate width for each button.
  const auto button_width = (bounds.getWidth() - (kButtonDistance * 2.0)) / 3.0;
  const auto button_height= getLocalBounds().getHeight() * 0.2;

  juce::Grid grid;
  grid.rowGap = 20_px;
  grid.columnGap = 20_px;

  using Track = Grid::TrackInfo;
  grid.templateRows = {Track(1_fr), Track(2_fr), Track(2_fr)};
  grid.templateColumns = {Track(1_fr), Track(1_fr), Track(1_fr)};

  grid.items.add(GridItem(google_button_).withWidth(button_width));
  grid.items.add(GridItem(duckduckgo_button_));
  grid.items.add(GridItem(bing_button_));

  grid.performLayout(bounds);
}

Grid 使用 Row（橫列）以及 Column（直行）來拉版面。上述程式碼先設定行列間距為 20 pixel。

接著利用 templateRows 以及 templateColumns 來設定行與列的數量以及大小分佈。

然後把三個 TextButton 以 GridItem 包裝起來後，加到 Grid。最後再呼叫 performLayout 進行排版。效果如下：

目前為止介紹的 GUI Layout 工具可以視不同場合互相搭配，以建構複雜的使用者介面。 接下來要介紹的是改變個別控制項「外觀」的工具——juce::LookAndFeel。

JUCE DemoRunner 的範例如下，一模一樣的控制項（行為不變），透過 JUCE LookAndFeel 機制，外觀可以千變萬化：