0

I have a grid that that is 24 columns and lets say 2 rows, I show a maximum of 4 elements per row so of my grid 8 child I would see a 2 rows each with 4 columns, now if my grid has 6 children, I would see 1 row of 4 columns and another row of 2 columns. In this scenario I want to centerally align the row that is not full underneath the row that is full so, it looks like this,

enter image description here

Now I am getting this currently my assigning classes to the last 2 elements in my loop that builds this grid, and then applying an offset,

&.offset-first {
    grid-column: var(--offsets) / span var(--span);
}

So my question is 2 fold,

  1. Is there a way in css to fill a grid from the middle i've checked out align-items:center on the parent and that doesn't seem to do it.

  2. If I need to do it by classes is there a way to only add the classes to elements when the number of elements I am looping over would leave a remainder of 1, 2 or 3 on a row?

This is my loop currently,

public loop: number = [1, 2, 3, 4, 5, 6, 7];
public maxColumns: number = 4;
public gridColumns: number = 24;

<div v-for="(n, index) in loop" class="video__container" :key="n" :class="{'offset' : ((index + loopRemainders)  >= loop.length)}"></div>

In this loop I would expect the last 3 elements in the loop to have a class of offets, but only 2 do so obviously my maths is wrong.

Some guidance on the best solution would be amazing.

Udders
  • 6,914
  • 24
  • 102
  • 194
  • 1
    this is a flexbox job https://stackoverflow.com/q/46276793/8620333 – Temani Afif Jan 31 '21 at 23:11
  • No it's 100% a css grid job as the elements may grow in height or width and still need to nest nicely. – Udders Jan 31 '21 at 23:16
  • But it's not the best solution for what I need. I need to be able to work on the X and Y axis. I have the grid layout working perfectly, I just need to be able offset elements when the row isn't equal to 4 – Udders Jan 31 '21 at 23:27
  • You can do this simply by using [Flexbox](https://stackoverflow.com/questions/46276793/how-to-center-elements-on-the-last-row-in-css-grid). – Virej Dasani Feb 01 '21 at 04:06
  • Flexbox only works one axis. – Udders Feb 01 '21 at 09:31

0 Answers0