How to draw a grid of cards/elements with Polymer?

Question

I am an Android developer trying to learn Dart-Polymer(I am also fairly new to HTML dev). I tried the custom card example in the polymer tutorial, and as an extension I want to display multiple cards in a rectangular grid. I see there are horizontal and vertical layouts in Polymer, and I was wondering if Polymer has something like GridView in Android. Can someone suggest how to proceed ?

The grid on left is what I want to achieve :

The core-card is on the right. I can see that element in the designer (please see the panel in right under core). But I am unable to find the core-card in Polymer libraries. That's why I am going with custom card (from the tutorial mentioned above). I would like to use core-card if available.

After posting this question, I found out about core-layout-grid - I am not sure how to use it, and if that's what I need.

Answer 1

Polymer has excellent handling to ease the use of CSS FlexBox. Using the various layout,horizontal,vertical, wrap, and flex attributes it is very easy to make very flexible and responsive layouts, including grids.

You can read more about the Layout attributes and their uses, including various alignment attributes from the Polymer Layout Attributes page. In particular look at the Wrapping section as it helps to create responsive grids that will appropriately adjust based on the width of the display.