Let's continue working on the user interface.
We added these product cards,
with this nice little shadow effect.
And this list looks good on a narrow screen,
but if we expand the browser window
then there's too much white space on this page.
On a typical desktop screen
we may want to display a grid of products.
Now, Tailwind provides some utility classes
for using a CSS grid.
We can basically write "grid-cols"
and the number of columns we want, like "3",
and this will create a 3-column grid.
So let's try that in our application.
Not in the ProductCard but in the HomePage,
that is where we display the list.
So we can style this list
with "grid" and "grid-cols-3",
And this will lay out our product cards
in a nice 3-column grid.
That's great. But what happens now
if we resize this window?
It always displays 3 columns,
even though the screen is too small
to show 3 full product cards.
If somebody looks at our website
on a mobile phone for example
it would be better to display a single column.
But of course if we do that
we have the same problem as before,
that it doesn't look good on a large screen.
That's where the concept of
"Responsive Design" comes in.
You're probably familiar with this idea:
it's about designing our website
so that its adapts automatically
to different screen sizes.
But in this video I want to show you
how Tailwind CSS makes this easy.
Tailwind provides some breakpoint prefixes
we can put in front of any utility class.
For example if we prefix a class with "lg:"
that means it will only apply to large screens.
Where "lg" means a screen that's at least
1024 pixels wide.
There are a few predefined "breakpoints",
from "sm" for a small screen of at least "640px",
to "2xl" for a double extra-large sceen,
that is "1536px" or more.
Let's see how this works in practice,
which is actually easier than explaining it in words.
We can leave "grid-cols-1" as the default setting,
meaning this will apply to all screen sizes,
unless otherwise specified.
But then we can add a different class
prefixed by "lg:", that as we've seen means
when the screen is at least "1024px" wide.
And in this case we can set "grid-cols-3".
Now, the important thing to notice here
is that by default, that is without a prefix,
styles apply to all screen sizes,
and then we can add a prefix
to limit certain rules to screens
larger than a given size.
So you should first design your styles
so they look good on small screens,
and then apply different rules for larger screens.
Some other CSS frameworks actually do the opposite:
they assume a large screen by default
and let you add exceptions for smaller screens.
I think the Tailwind approach works much better:
it encourages you to take a mobile-first view.
Anyway, with these rules we see
a single column by default,
but as we expand the window
at some point it will switch to a 3-column layout
And by the way, that's why
it's called "responsive design",
because it "responds" to changes in the screen size.
Now, when I record these videos
I always increase the browser zoom level
to make sure the videos are clearer.
But let me reset the zoom briefly,
so I can show you the exact breakpoint,
that is when the layout changes.
Note in the top-right that at 1024
we still show 3 columns,
but as soon as I shrink the window
just a little bit more
it changes to a single column layout.
This proves that 1024
is indeed the breakpoint for an "lg" screen
when using the Tailwind prefixes.
Let me increase the zoom again,
and this is how we can have a responsive grid.
Now, there's just a small thing
I want to tweak here.
We set a margin on the ProductCard,
to have some space between the cards,
but since we're now using a grid
we could set some "gap" on the grid instead.
This way we make sure there's some space
not just vertically but also horizontally
between the cards in the grid.
Ok, that was just a small thing.
But the main point about this video
was showing you how to do responsive design
using Tailwind CSS.