Archives

Index

• Grid layout

---

Grid layout

Before adding these styles, check "Show excerpts on all archives", and uncheck "Use a large, featured display for the latest post". This makes all of the archives consistent.

Two column grid:

To be used with the default or one column layout:

/* Archives */
.archive .site-main {
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;
}

.archive .has-post-thumbnail .post-thumbnail {
   margin-bottom: 1rem;
   max-width: 100%;
}

.archive .site-main article {
   display: block;
   margin-top: 0;
}

@media (min-width: 1000px) {
    .archive .site-main article {
        width: calc( 50% - ( 2rem / 2 ) );
    }
}

.archive .navigation.pagination {
    width: 100%;
}

Three column grid:

To be used with the one column wide layout:

/* Archives */
.archive .site-main {
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;
}

.archive .has-post-thumbnail .post-thumbnail {
   margin-bottom: 1rem;
   max-width: 100%;
}

.archive .site-main article {
   display: block;
   margin-top: 0;
}

@media (min-width: 600px) {
    .archive .site-main article {
        width: calc( 50% - ( 2rem / 2 ) );
    }
}

@media (min-width: 1000px) {
    .archive .site-main article {
        width: calc( 33.33% - ( 2rem / 3 * 2 ) );
    }
}

.archive .navigation.pagination {
    width: 100%;
}