css - <iron-list> with grid 属性每行只显示一个元素

我想使用 Polymer 目录中的元素作为网格。
我已经在列表上设置了网格属性，并给 children 一个固定的宽度和高度。
然而，每一行只包含一个 child 。
这是我的代码:

这是我的自定义元素的容器，其中包含 iron-list

<div style="height: 675px;">
    <cit-entity-card-container card-data="[[cardData]]"></cit-entity-card-container>
</div>

这是我的自定义元素

<dom-module id="cit-entity-card-container">

<style include="cit-shared-styles">
    :host {
        @apply(--layout-horizontal);
        @apply(--layout-wrap);
        margin: 0 8px 0 0;
        height: 100%;
        border-radius: 5px;
        background-color: var(--cit-white);
        box-sizing: border-box;
        padding: 16px 0 16px 0;
        display: block;
    }

    iron-list {
        height: 675px;
    }
</style>

<template>
    <iron-list items="[[cardData]]" as="item" grid>
        <template>
            <div style="width: 100px; height: 100px;">100x100</div>
        </template>
    </iron-list>
</template>

<script>
    Polymer({
        is: 'cit-entity-card-container',

        properties: {
            cardData: {
                type: Array,
                value: function() { return []; }
            }
        }
    });
</script>

它是这样的: