# Grid alignment on Kirby panel

**URL:** <https://forum.getkirby.com/t/grid-alignment-on-kirby-panel/10508>\
**Category:** Questions\
**Tags:** v2\
**Created:** [May 27, 2018, 4:38pm UTC](https://forum.getkirby.com/t/grid-alignment-on-kirby-panel/10508 "2018-05-27T16:38:41Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![DennisA](https://avatars.discourse-cdn.com/v4/letter/d/50afbb/32.png) [@DennisA](https://forum.getkirby.com/u/DennisA)\
**Post date:** [May 27, 2018, 4:38pm UTC](https://forum.getkirby.com/t/grid-alignment-on-kirby-panel/10508/1 "2018-05-27T16:38:41Z")

</div>

Hey there, I’ve build a simple asymmetric flexbox grid.  
I was wondering what would be the best practice to set the width of my columns in the panel.  
Right now I have to set the column width for every thumbnail in panel. But this wont work, because  
I can’t realign every thumbnail whenever I am uploading a new image.

Here is the quick example of the grid how it should work/looks like:  
https://codepen.io/Dennisade/embed/preview/gzVZjL?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=gzVZjL

and here is my code:

```
<main>
  <div class="row">
    <?php foreach($projects as $project) : ?>
    <?php foreach($project->thumbnail() as $image): ?>
    <?php if($img = $project->image($image)): ?>
    <div class="col b<?php echo $project->gridalign(); ?>">
      <div class="thumb">
        <a data-url="<?php echo $project->url() ?>" </a>
          <?php snippet('responsive_image', array('image' => $img, 'sizes' => [512, 768])) ?>
        </a>
      </div>
      <div class="projectTitle sans-m">
        <?php echo $project->title(); ?> <span class="serif-m"><?php echo $project->client(); ?></span>
      </div>
    </div>
    <?php endif ?>
    <?php endforeach ?>
    <?php endforeach?>
  </div>
</main>

```

So I thought if its possible to set a structure which is repeating on some point, so that I can only upload images which are aligning by themselves .

Would be super nice if someone could help me out here ☀

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 27, 2018, 5:01pm UTC](https://forum.getkirby.com/t/grid-alignment-on-kirby-panel/10508/2 "2018-05-27T17:01:34Z")

</div>

To get this right: Do you want to

- have the same pattern repeat itself all the time =\> create an array of grid values that restarts once it is filled
- or set a column width for each image? =\> add the column width to the image itself via an image field

Apart from that, the code above will not create the same pattern as in the CodePen, because your row is not within the foreach loop.

---

<div class="post-metadata">

**Author:** ![DennisA](https://avatars.discourse-cdn.com/v4/letter/d/50afbb/32.png) [@DennisA](https://forum.getkirby.com/u/DennisA)\
**Post date:** [May 27, 2018, 5:04pm UTC](https://forum.getkirby.com/t/grid-alignment-on-kirby-panel/10508/3 "2018-05-27T17:04:09Z")

</div>

Oh yes… the codepen should be hoe the grid looks like, sorry for the confusion.  
So I guess to create an array of grid value that restarts once it is filled, sounds like a good solution. Is there a starting point for this or something? 🙂

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 27, 2018, 5:19pm UTC](https://forum.getkirby.com/t/grid-alignment-on-kirby-panel/10508/4 "2018-05-27T17:19:57Z")

</div>

Not that I know of. I’d start with the grid:

```auto
$grid = [
 'row_1' => ['b50', 'b50'],
 'row_2' => ['b25', 'b25', 'b25']
];

```

Then I’d probably rather work with a collection of all images instead of these two loops. Maybe with a custom filter method for the images. But that you have to find out for yourself, it’s a matter of applying the logic.

---

<div class="post-metadata">

**Author:** ![DennisA](https://avatars.discourse-cdn.com/v4/letter/d/50afbb/32.png) [@DennisA](https://forum.getkirby.com/u/DennisA)\
**Post date:** [May 27, 2018, 5:22pm UTC](https://forum.getkirby.com/t/grid-alignment-on-kirby-panel/10508/5 "2018-05-27T17:22:28Z")

</div>

Okay cool. Thanks. I will try to get this done!

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 6, 2025, 5:28pm UTC](https://forum.getkirby.com/t/grid-alignment-on-kirby-panel/10508/6 "2025-02-06T17:28:06Z")

</div>

Archived on February 6, 2025, 5:28pm UTC