Menu icon Foundation
Center block grid in F6

There are quite a few posts and succeesful work arounds to get widowed blocks to center at the bottom of a block grid, but is there a method for F6 yet?

Thanks

F6block gridcenter

There are quite a few posts and succeesful work arounds to get widowed blocks to center at the bottom of a block grid, but is there a method for F6 yet?

Thanks

Ben Wills over 3 years ago

I've managed to get something working now by applying some very 'hacky' custom classes to the block grid, which may help someone so i'm posting it here.  Its very purpose specific, so a better solution would be great for the future please Rafi :)

So i'm using 2 columns only in medium and 3, 4 or 5 in large.

If its an odd number of blocks I apply the .medium-odd class.

Then I add either .large-shift-1, .large-shift-2, .large-shift-3 or .large-shift-4 depending on the number of 'empty' blocks on the last line.

@media screen and (min-width: 40em) {
  .large-shift-1 > .column, .large-shift-2 > .column, .large-shift-3 > .column, .large-shift-1 > .columns, .large-shift-2 > .columns, .large-shift-3 > .columns {
      margin-left: 0; }
    .medium-odd > .column:last-child, .medium-odd > .columns:last-child {
      margin-left: 25%; }
}
 
@media screen and (min-width: 64em) {
  .medium-odd > .column:last-child, .medium-odd > .columns:last-child {
      margin-left: 0; }
    .large-up-3.large-shift-1 > .column:nth-last-child(2), .large-up-3.large-shift-1 > .columns:nth-last-child(2) {
      margin-left: 16.6666666665%; }
    .large-up-3.large-shift-2 > .column:last-child, .large-up-3.large-shift-2 > .columns:last-child {
      margin-left: 33.3333333333%;  }
    .large-up-4.large-shift-1 > .column:nth-last-child(3), .large-up-4.large-shift-1 > .columns:nth-last-child(3) {
      margin-left: 12.5%;  }
    .large-up-4.large-shift-2 > .column:nth-last-child(2), .large-up-4.large-shift-2 > .columns:nth-last-child(2) {
      margin-left: 25%;  }
    .large-up-4.large-shift-3 > .column:last-child, .large-up-4.large-shift-3 > .columns:last-child {
      margin-left: 37.5%;  }
    .large-up-5.large-shift-1 > .column:nth-last-child(4), .large-up-5.large-shift-1 > .columns:nth-last-child(4) {
      margin-left: 10%;  }
    .large-up-5.large-shift-2 > .column:nth-last-child(3), .large-up-5.large-shift-2 > .columns:nth-last-child(3) {
      margin-left: 20%;  }
    .large-up-5.large-shift-3 > .column:nth-last-child(2), .large-up-5.large-shift-3 > .columns:nth-last-child(2) {
      margin-left: 30%;  }
    .large-up-5.large-shift-4 > .column:last-child, .large-up-5.large-shift-4 > .columns:last-child {
      margin-left: 40%;  }
}