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.
[Link]
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.
[Link]
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.
[Link]
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
[Link]
The second two are looked at in this video
[Link]
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
( [Link] )
