Centre align bottom row of people section

3 May

Using the people section can be good but it will always left align. This code allows you to centre align the bottom row. The code basically doubles the amount of columns available to align things to, then pushes over the first item in the bottom row by 1 column. In my example, I have 7 items in my list - 4 in the first tow and 3 in the second row.

The first 4 is the number of columns your people section is using as a setting

8 refers to the number of columns you want it to think about (usually double the column count)

2 refers to the number of columns you want a people item to take up

At this point you have effectively reset the widths so they are back to normal.

5 - this is the first people item you want to move over. E.g. if you have 11 items (two rows of 4 then a row of three) your first item is number 9 because that excludes the first two full rows.

The last two are talking about where you want the 5 element to begin (start of column 2) and which point you need it to end (start of column 4)

section[data-section-id="637e2c7caa61145ec2bffe13"]

{
@media screen and (min-width: 768px) {
.user-items-list-simple[data-num-columns="4"] {
grid-template-columns: repeat(~"8,1fr");
}
.user-items-list-simple[data-num-columns="4"] .list-item {
grid-column: span 2;
}
.user-items-list-simple[data-num-columns="4"] .list-item:nth-child(5) {
grid-column: ~"2/4";
}
}
}