kevinpowell.

co

Simple Grid Patterns

for your projects

Adjustable grid
with modifiers
.grid {
.grid-3 { --column-count: 3; }

--column-count: 3;

.grid-4 { --column-count: 4; }

.grid-5 { --column-count: 5; }
display: grid;

grid-template-columns: 
 with custom properties

repeat(var(--column-count), 1fr);
.grid { --column-count: 1; }

}
@media (min-width: 600px) {

Set the desired column count using custom .grid { --column-count: 3; }

properties.
}

You can easily make several different grids @media (min-width: 960px) {

with modifier classes, or adjust the column .grid { --column-count: 4; }

count inside media queries. }

grid auto-columns This creates a grid

where the browser will
.auto-grid {
figure out how many
display: grid;
columns there will be.

grid-template-columns: 

repeat(auto-fit, minmax(min(200px, 100%), 1fr));
It does this based on
the the number of
}
children and the
amount of available
space that they have,
The 200px is the desired minimum size, the 100% based on the
prevents overflow if ever the parent is narrower minimum size you
than 200px.
have provided.
 kevinpowell.co

Simple Grid Patterns

for your projects

Pushing the footer .main-layout {

down min-height: 100vh;

If you have short pages and want to display: grid;

ensure the footer always stays at grid-template-rows: 


the bottom, we can use this grid as rows 1fr rows;

the main layout.

}

The stack
If ever you need to layer
.the-stack {
elements on top of each
display: grid;
other, say an image or video
grid-template-areas: "stack";
as a background with some
text on top of it, this will do
place-items: center;
the trick, placing all elements
}

on top of one another as well

as vertically and horizontally
.the-stack > * {
centering everything.
grid-area: stack;

If you want to see them in action, the first two are looked at in this video

and the second two are looked at in this video .

If you’re still struggling with grid, I’d suggest checkout out this video that

looks at what I think are the easiest ways to get going with it.
 kevinpowell.co

Simple Grid Patterns

for your projects

Adjustable grid
with modifiers
.grid {
.grid-3 { --column-count: 3; }

--column-count: 3;

.grid-4 { --column-count: 4; }

.grid-5 { --column-count: 5; }
display: grid;

grid-template-columns: 
 with custom properties

repeat(var(--column-count), 1fr);
.grid { --column-count: 1; }

}
@media (min-width: 600px) {

Set the desired column count using custom properties.

.grid { --column-count: 3; }

You can easily make several different grids with

modifier classes, or adjust the column count inside
media queries. @media (min-width: 960px) {

.grid { --column-count: 4; }

grid auto-columns This creates a grid where

the browser will figure out
.auto-grid {
how many columns there
will be.

display: grid;

grid-template-columns: 
 It does this based on the

repeat(auto-fit, minmax(min(200px, 100%), 1fr));
the number of children and
the amount of available
} space that they have,
based on the minimum size
you have provided.
The 200px is the desired minimum size, the 100%
prevents overflow if ever the parent is narrower
than 200px.
 kevinpowell.co
Simple Grid Patterns
for your projects
Pushing the footer .main-layout {

down min-height: 100vh;

If you have short pages and want to ensure

the footer always stays at the bottom, we
display: grid;

can use this grid as the main layout. grid-template-rows: 


rows 1fr rows;

The stack If ever you need to layer elements

.the-stack {
on top of each other, say an image
or video as a background with
display: grid;
some text on top of it, this will do
grid-template-areas: "stack";
the trick, placing all elements on
top of one another as well as
place-items: center;
vertically and horizontally centering
}

everything.

.the-stack > * {

grid-area: stack;

If you want to see them in action, the first two are looked at in this video

https://youtu.be/r1IitKbJRFE

The second two are looked at in this video 


https://youtu.be/JHregeIsjPQ

If you’re still struggling with grid, I’d suggest checkout out this video that

looks at what I think are the easiest ways to get going with it

( https://youtu.be/rg7Fvvl3taU )