grid.gutter Number|String

Defines the width of the gutters between the columns / rows.

Example of the gutter setting of the grid layout

<script src=""></script>

<div id="listView"></div>
<div id="pager" class="k-pager"></div>

<script type="text/x-kendo-template" id="template">
    <div class="product">
        <img src=" ProductID #.jpg" alt="#: ProductName # image" />
        <p>#:kendo.toString(UnitPrice, "c")#</p>

  $(function() {
    var dataSource = new{
      data: products,
      pageSize: 21

      dataSource: dataSource

      dataSource: dataSource,
      layout: "grid",
      grid: {
        cols: 11,
        gutter: 20
      template: kendo.template($("#template").html())
    width: 100px;
  .product h3{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .9em;
In this article