How to Configure cards positions in the Gallery Widget in ArcGIS Hub

[AndrewCastilloTBSL]

Hello Everyone,

I have 6 apps I want to display on my hub site gallery but every time I publish it keeps looking like 4 small cards at the top and two big cards at the bottom.

How do I get it to display it as 3 small cards at the top and 3 small cards at the bottom?

[KlaraSchmitt · Accepted solution]

Hello @AndrewCastilloTBSL,

Hub uses the 12 column grid from Bootstrap 3, so the the top row of cards is distributed evenly across 12 columns by making each card 3-columns wide. With our Gallery Card, you can have a max of 4 cards per row. So in the second row, where you only have 2 cards, they are being stretched to 6-columns wide. If you want to have 3 cards in the top row and 3 cards in the bottom row, I'd recommend adding a 1-column spacer to the left side of the Gallery. (You will need to downsize it to 1-column.) But that will prevent the Gallery Card from trying to put 4 cards in the top row.

[AndrewCastilloTBSL]

I see, thank you that helps.

[Mark_Hébert]

We had some interns work on our new Hub display coding in Text widgets to display 5-across, thus:

<div class="grid-container" style="grid-template-columns:repeat(5,1fr);"> <!-- grid template is to determine how many cards in each row -->
<div class="column-24" style="display:flex;flex-wrap:wrap;grid-gap:10px;justify-content:center;"> <!-- Justify Content is to align the cards CENTER -->

You can see the result here: https://www.coralgables.com/smartcity.

[TelmaFernandes2]

@Mark_Hébert can you share the code?

[Mark_Hébert]

This the snippet for the first card in a row of 5:

<!-- 5-up block test Calcite HTML -->

<!-- EDITED CODE BY JUAN AND LUCIA -->
<!-- All the code added is inside style="" in line 7 and 8 -->
<div class="grid-container" style="grid-template-columns:repeat(5,1fr);"> <!-- grid template is to determine how many cards in each row -->
<div class="column-24" style="display:flex;flex-wrap:wrap;grid-gap:10px;justify-content:center;"> <!-- Justify Content is to align the cards CENTER -->

<!-- 1 - First Card 1/1 -->
<a href="https://link to resource" class="card-link" target="_blank">
<div class="card" style="width: 13rem;">
<div class="card-content">
<img class="card-img-top" src="https://image.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">City Financial Revenues</h5>
<p class="card-text"> </p>
</div>
<div class="card-body">
</div>
</div>
</div>
</a>

Just keep adding card - and keep track of your 5/row using the comments <!-- 1 - First Card 1/1 --> <!-- 2 - Second Card 1/2 --> <!-- 3 - Third Card 1/3 --> .. <!-- 6 - Sixth Card 2/1 --> etc.

Let us know how it goes! Good luck.

Mark