On gists

Css grid by KevinPowell sheats

CSS CSS trick

grid.css Raw #

/* Adjustable grid */
.grid {
 --column-count: 3;
 display: grid;
 grid-template-columns: repeat(var(--column-count), 1fr);
}

/* modifiers */
.grid-3 { --column-count: 3; }
.grid-4 { --column-count: 4; }
.grid-5 { --column-count: 5; }

/* custom */
.grid { --column-count: 1; }
@media (min-width: 600px) {
 .grid { --column-count: 3; }
}
@media (min-width: 960px) {
 .grid { --column-count: 4; }
}

/*
-----------------------------------------------------
*/

/* grid auto-columns */
.auto-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/*
-----------------------------------------------------
*/

/* Pushing the footer down */
.main-layout {
 min-height: 100vh;
 display: grid;
 grid-template-rows: rows 1fr rows;
}


/*
-----------------------------------------------------
*/

/* The stack */
.the-stack {
 display: grid;
 grid-template-areas: "stack";
 place-items: center; 
}
.the-stack > * {
 grid-area: stack;
}