Edit in JSFiddle

GC.Spread.Views.LicenseKey =
  "GrapeCity-Internal-Use-Only,E181231176599373#B0nyzmeat6dRtyN9MndtpmVSNTQZ9GNMpFcRJTYJ3mQnNHZm34NKRkTMNHa7kUarNlTpZTTaJnTvUUST9UdSJnTrA5dzFVc44WO7hDbxwWZxE7MHhDbvIlc7l7QxZmeTRnTC3WZvcEWNlXTSFWN59kdYhzaPFFc0VFdKVjbCZ5YzkHd6k4aMdzcy5mYzJVbYZFNTBjZhFTcwp5QOJmWrFXM03yYi3mdwRWRx4GZPBnTzxkRygFe0Z5Srl6NrAHRqlTRUJmQ5x6KyJjR7gGUFh4Y4MlW5l5KPdXQOljU6pHcuJlZShWUCd6Z5AnMrMTWrJHVyIDVqNmRDlFcaFkI0IyUiwiIDJ4N4MzN5EjI0ICSiwyN7ETN4gDNygTM0IicfJye&Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsIyNxgDN4ADIyADOwkTMwIjI0ICdyNkIsICdl9mLsxWZoNnauUGbkRWamJiOiMXbEJCLi8LpnrJvk/IvlrKomPqgjb8gjfrgjf9gjz1gjz0gjDrgjLiOiEmTDJCLlVnc4pjIsZXRiwiIzczM9kTN6cTMxMjMxgTMiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQvEGUKFUbycmTzE6ZVZnYxVjd6YET7EGUvdGOGJGSyQnbWZ7bwN7YT3WbHlWaRZVS8p7VRhXUKBDRNNjazcnTzpleINkWMVHRLhmUZVlNZNkMoB7Z0l6uzDm";

var data = [{
    task: "ビジネスロジック",
    assignto: "開発部 山田",
    description: "UIとロジックの連携部",
    status: "設計中"
  },
  {
    task: "画面",
    assignto: "開発部 佐藤",
    description: "アプリ画面の開発",
    status: "開発中"
  },
  {
    task: "データベース",
    assignto: "開発部 松島",
    description: "DB設計と構築・管理",
    status: "開発中"
  },
  {
    task: "クラウド同期",
    assignto: "開発部 亀井",
    description: "設定のcloud保存",
    status: "開発中"
  },
  {
    task: "課金システム",
    assignto: "開発部 田中",
    description: "支払いシステムの開発",
    status: "テスト中"
  },
  {
    task: "ユーザー管理",
    assignto: "開発部 三井",
    description: "利用者管理の開発",
    status: "テスト中"
  }
];

var rowTemplate =
  '<div class="group-item-container">' +
  '<div data-column="task" class="item-task-container"></div>' +
  '<div data-column="assignto" class="item-name-container"></div>' +
  '<div data-column="description">・</div>' +
  "</div>";

//--------------------------
// Spread.Views 列定義
//--------------------------
var columns = [{
    // 1列目の設定:タスク名
    id: "task",
    caption: "タスク名",
    dataField: "task"
  },
  {
    // 2列目の設定:開始日
    id: "description",
    caption: "概要",
    dataField: "description"
  },
  {
    // 3列目の設定:終了日
    id: "assignto",
    caption: "担当者",
    dataField: "assignto"
  }
];

var TrellisGrouping = new GC.Spread.Views.Plugins.TrellisGrouping({
  panelUnitWidth: 195
});

// Spread.Viewsに設定するカード・レイアウトインスタンスの生成
var cardLayout = new GC.Spread.Views.Plugins.CardLayout({
  cardHeight: 150,
  cardWidth: 190,
  grouping: [{
    field: "status"
  }],
  groupStrategy: TrellisGrouping,
  rowTemplate: rowTemplate
});

// Spread.Viewsを配置するDOM要素の取得
var domSV = document.getElementById("grid1");
var dataView = new GC.Spread.Views.DataView(domSV, data, columns, cardLayout);
<!-- Spread.Viewsを配置するDOM -->
<div id="grid1" class="spreadViews"></div>
body {
  font-size: 14px;
  background-color: #eae8da;
}

/* Spread.Viewsのサイズ指定 */
.spreadViews {
  width: 600px;
  height: 550px;
  margin: auto;
}

.trellis-grouping .gc-trellis-viewport {
  background-color: #e5e3d1;
  background-color: #f9f9f5;
}

.trellis-grouping .gc-trellis-group-content {
  background: transparent;
}

.trellis-grouping .gc-trellis-group-header {
  background: transparent;
  font-size: 25px;
  font-weight: 300;
}

.group-item-container {
  font-size: 0.9rem;
  color: #202020;
  border: 1px solid #e0e0e0;
  background-color: white;
  border-bottom-width: 3px;
  border-radius: 4px;
  padding: 3px;
  margin: 3px;
  height: 140px;
}

.item-name-container {
  font-size: 0.8rem;
  margin-top: 7px;
  margin-bottom: 7px;
  text-decoration: underline;
}

.item-task-container {
  background-color: #0f739a;
  color: white;
  font-size: 1rem;
  text-align: center;
}