Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Article Grid Algorithm
// Article Grid
//
// The Article Grid is a CSS Grid algorithm specifically created for the single article layout.
// It supports a side area called `social` that snaps to the second row on the left at desktop-xl
// in response to `author` becoming a full row. On small screens it is single column.
//
// The Article Grid algorithm is only responsible for position the _outer most_ elements of
// the single article contents.
//
// Markup: a-article-grid.html
//
// Style Guide: Algorithms.ArticleGrid
@import '~@setup';
.a-article-grid {
@supports( display: grid ) {
display: grid;
grid-gap: $spacer-050;
grid-template-columns: 100%;
@include breakpoint( tablet ) {
grid-template-columns: repeat( 2, 1fr );
grid-template-rows: repeat( 3, auto );
grid-gap: $spacer-1;
}
}
@include breakpoint( desktop-xl ) {
@supports( display: grid ) {
grid-template-columns: repeat( 6, 1fr );
grid-column-gap: $spacer-2;
}
}
}
.a-article-grid__main,
.a-article-grid__header {
@include breakpoint( tablet ) {
@supports( display: grid ) {
grid-column: 1 / -1;
}
}
}
.a-article-grid__main {
width: 100%;
@include breakpoint( desktop-max ) {
display: initial; // This resets an issue with pmc-a-grid and resizing images that have inline widths larger than the viewport.
}
@include breakpoint( desktop-xl ) {
@supports( display: grid ) {
width: initial;
grid-column: 2 / -1;
}
}
}
.a-article-grid__author {
@include breakpoint( desktop-xl ) {
@supports( display: grid ) {
grid-column: 1 / -1;
}
}
}
.a-article-grid__author,
.a-article-grid__social {
@include breakpoint( mobile-max ) {
display: flex;
justify-content: center;
}
@include breakpoint( tablet ) {
float: left;
width: calc( 50% - #{$spacer-1} );
@supports( display: grid ) {
width: initial;
}
}
}
.a-article-grid__social {
@include clearfix;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.