css grid if the row isn’t full center the content

  css, html, javascript, vue.js

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.

Source: Ask Javascript Questions

LEAVE A COMMENT