How do you customize the number of columns in the Archive grid view?

[elipousson]

• This is a question about using the theme.

---

This may be an obvious question (I haven't used Sass or Susy before trying to modify this theme) but I haven't been able to figure it out yet and didn't see any tips in the documentation.

How do you increase the width of archive items in the Archive grid view and/or limit the number of archive items that can appear in a single row?

This is the page that I am trying to customize – there are only three items displayed right now but I'm planning to add several more.

[mmistakes]

It's all done through CSS. More specifically Sass and a set of mixins provided by Susy. The best tip I can give you is turn on the web developer tools of whatever browser you're using and start inspecting elements on the page (right click... tap inspect element).

You'll quickly see what elements have what styles on them and then you can dig deeper into the .scss partials by searching by those class names.

In the case of the archive grid__item classes you can find them here in _sass/_archives.scss

@include breakpoint($small) {
    @include gallery(5 of 10);
    .archive__item-teaser {
      max-height: 200px;
    }
  }

  @include breakpoint($medium) {
    margin-left: 0; /* reset before mixin does its thing*/
    margin-right: 0; /* reset before mixin does its thing*/
    @include gallery(2.5 of 10);

    .archive__item-teaser {
      max-height: 120px;
    }

    .archive__item-excerpt {
      display: block;
      font-size: $type-size-6;
    }
  }

What's going on here is, there are several breakpoints (starts with the smallest width and builds up) that use Susy's gallery mixin to do some math and calculate the widths, add floats, margins, etc.

On $small screens: @include gallery(5 of 10); means span this element across 5 columns of a 10 column grid, eg. 1/2th of the parent container (2 items in a row).

On $medium and up screens: @include gallery(2.5 of 10); means span this element across 2.5 columns of a 10 column grid, eg. 1/4th of the parent container (4 items in a row)

If you want to fit more or less items in a row you'll need to change those values.

[elipousson]

Thank you so much for the quick reply and helpful information! I made it to the _archives.scss file but couldn't figure out what to do when I got there. I should be able to sort it out from here.

[ottoman91]

hi @elipousson were you able to limit the number of images that came up in a single row? I edited the .grid_item class with the following, but no luck so far:
`
@include breakpoint($medium) {
margin-left: 0; // reset before mixin does its thing
margin-right: 0; // reset before mixin does its thing
@include gallery(5 of 10);

.archive__item-teaser {
  max-height: 200px;
}

.archive__item-excerpt {
  display: block;
  font-size: $type-size-6;
}

}

@include breakpoint($large) {
margin-left: 0; // reset before mixin does its thing
margin-right: 0; // reset before mixin does its thing
@include gallery(5 of 10);

.archive__item-teaser {
  max-height: 200px;
}

.archive__item-excerpt {
  display: block;
  font-size: $type-size-6;
}

}

@include breakpoint($x-large) {
margin-left: 0; // reset before mixin does its thing
margin-right: 0; // reset before mixin does its thing
@include gallery(5 of 10);

.archive__item-teaser {
  max-height: 200px;
}

.archive__item-excerpt {
  display: block;
  font-size: $type-size-6;
}

}
`
Thanks!

[benslack19]

I'm trying to change the default of 4 columns to 3 columns. I thought it was a simple fix where I would change width: span(3 of 12) to width: span(4 of 12) in the _archive.scss file. However, I think I might also need to change the nth-child values even though I don't see this referenced in this issue string. However, I don't fully understand the logic of those values.

After I set width: span(4 of 12), the first row shows up as desired, but the rest are scattered.

I tried to edit the nth-child values with trial and error but I'm still not seeing the logic. Here's what gives the above image.

\@include breakpoint($medium) { margin-left: 0; /* override margin*/ margin-right: 0; /* override margin*/ width: span(4 of 12); // <--- change this to span(4 of 12)`

&:nth-child(2n + 1) {                              // <--- what do I change this value to?
  clear: none;
}

&:nth-child(4n + 1) {                             // <--- what do I change this value to?
  clear: both;
}

&:nth-child(4n + 2) {                           // <--- what do I change this value to?
  clear: none;
  margin-left: gutter(1 of 12);              // <--- does this need to change?
}

&:nth-child(4n + 3) {                           // <--- ?
  clear: none;
  margin-left: gutter(1 of 12);             // <--- ?
}

&:nth-child(4n + 4) {                         // <--- ?
  clear: none;
  margin-left: gutter(1 of 12);           // <--- ?
}

}

Any help would be appreciated.

[mmistakes]

The nth-child selectors are to clear the floats. Because there are different values depending on the media queries sometimes the clear property needs to be reset which is what you're seeing in the code above when it switches between clear: both and clear: none. Because of how the cascade (C in CSS) works this is needed otherwise clears would cascade down to grid items and have unintended results.

To be honest the entire CSS for these grids is hacky at best. It should be revisited with flexbox instead and avoid floats all together.

[sgofferj]

@benslack19
Not sure if you found a solution but I found one for the same problem:

  @include breakpoint($medium) {
    margin-left: 0; /* override margin*/
    margin-right: 0; /* override margin*/
    width: span(4 of 12);

    &:nth-child(2n + 1) {
      clear: none;
    }

    &:nth-child(3n + 1) {
      clear: both;
      margin-left: 0;
    }

    &:nth-child(3n + 2) {
      clear: none;
      margin-left: gutter(1 of 12);
    }

    &:nth-child(3n + 3) {
      clear: none;
      margin-left: gutter(1 of 12);
    }

  }

[lwasser]

hey @sgofferj thanks for this example. How did you implement it? Are you editing the entire source archive.css file or writing over certain styles in the main.scss file? i'm having a hard time with the breakpoint element..

im trying to do something like this in the main.scss page to allow me to keep the minimal mistakes theme intact and just update if that makes sense. i may not understand how the breakpoints operate but i'm getting the error:

  Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/main.scss':
                    Undefined mixin 'breakpoint'. on line 94

/* Adding a 3 col grid */
.grid__item {
  margin-bottom: 2em;

  @include breakpoint($small) {
    float: left;
    width: span(5 of 10);

    &:nth-child(2n + 1) {
      clear: both;
      margin-left: 0;
    }

    &:nth-child(2n + 2) {
      clear: none;
      margin-left: gutter(of 10);
    }
  }

  @include breakpoint($medium) {
    margin-left: 0; /* override margin*/
    margin-right: 0; /* override margin*/
    width: span(3 of 12);

    &:nth-child(2n + 1) {
      clear: none;
    }

    &:nth-child(4n + 1) {
      clear: both;
    }

    &:nth-child(4n + 2) {
      clear: none;
      margin-left: gutter(1 of 12);
    }

    &:nth-child(4n + 3) {
      clear: none;
      margin-left: gutter(1 of 12);
    }

    &:nth-child(4n + 4) {
      clear: none;
      margin-left: gutter(1 of 12);
    }
  }
}

Many thanks for any guidance! i would love a 3 col grid implementation.
EDIT: thinking i may need to import this file but not exactly sure how without importing the entire vendor directory - i'd rather use the minimal mistakes gem files for most of this.

[sgofferj]

@lwasser
I actually stopped messing with Jekyll and MM a while ago because I couldn't get everything to my liking. It's on my list for the winter holidays, though.

[cooked]

Hi @lwasser,
your snippet works in my main.scss orverride (i.e. original minimal mistakes theme is untouched).

I do import the "partials" at the beginning of my file though, before your code... possibly this fixes your error?

@import "minimal-mistakes"; // main partials

[lwasser]

ahhhh @cooked thanks!! i'll try that. If you import that first, will it override other styles? I can play with this but it makes sense that this might work.

[cooked]

@lwasser
it should not (but I'm not a scss expert myself):

• for the imported "partials", those should be unique (and not overridden) unless you have explicitly redefined them in your .scss
• for the style itself in your snippet, it should only override properties that have been already defined in the parent .grid_item {} and merge new ones, similarly to how CSS would do