So let's now work on presenting our products
appropriately in that product grid,
and let's make it a product grid to begin with.
Now, for that,
we need to work on the styling
that we apply to that product item article,
which has a class of product-item.
And we need to work on the styling of that unordered list,
where we output all the products.
For that, I will add a new CSS file in the public folder,
in the styles folder,
and that will be the products.css file.
And I use a separate file because, of course,
not all pages of this website
will need the product-specific styling
and hence, I wanna combine or save all the styles
that affect the product items and grid
in that dedicated file
which can then only be included into the pages
that are involved with showing product data or content.
Now let's start with the product items.
So with the articles
that have this product-item class on them.
In products.css,
I will simply select this product-item class, like this.
And then of course, you can apply your favorite styles.
I will simply give those product items
a little bit of padding
of let's say space-4.
I wanna give them rounded corners
with border-radius-small,
or actually let's go for medium here.
I will ensure that all the text is centered
in there with text-align: center,
and I'll give them a background color of color-gray-600,
which is a different gray than my page has as a background.
Now, I also want to target the image in there specifically
because obviously that's way too big,
this image in the product-item.
And there, I wanna ensure that this image
in my product-item article actually has a width
that's 100% of the size of the product item
and a height of 10rem.
I'll also give it a object-fit of cover to ensure that
it's cropped appropriately so that it's not distorted.
Now of course, with 100% on the image,
won't have any effect if the product-item
has no fixed width though.
Now we could give product-item a width,
but I will actually not do that.
Instead, I wanna give that list some style instructions
to turn it into a grid where every cell of that grid
should then have a fixed width and height.
So therefore, I'll give this unordered list here,
actually, a class of product-grid
or products-grid,
or actually we can, of course, also go for an id,
since we will never have more than one item
with that id on the same page.
And then here,
maybe at the top of this products.css file,
though the exact position does not matter as so often,
I will target product-grid,
this id just added.
And then there, it gives us a margin
of let's say space-8 top and bottom
and auto left and right,
and set the display to grid.
That's very important.
And we did introduce you to the grid layout
early in the course.
So definitely check out those lectures again,
if you're not sure what the CSS grid is.
Just like Flexbox, it's a layouting mechanism
built into CSS that helps you position and size
child elements of that element that has display: grid.
Now one important CSS property
which you can set in conjunction with the grid
is the grid-template-columns property.
This allows you to define
how the columns of a grid should be sized.
Every grid is made up of columns and rows,
and you can control both.
If you don't control it,
then some automatic default values will be assumed.
But again, we shared more information on that
in dedicated lectures.
CSS grid can be very complex
if you want to learn all about that.
And that's why you can also, of course,
dive into further resources like MDN
or our complete CSS course,
where we dive super deeply into CSS grid.
Here for this example,
I'll deliberately keep it rather simple
because the great thing about CSS grid
is that you can achieve great layouts
with the rather simple settings as well.
And here, I just wanna set the columns for my grid
and I'll use the repeat function,
which is built into CSS,
to repeat the same setting for multiple columns.
And I could then enter three, for example,
to repeat a setting three times,
to enforce three columns.
But I'll actually choose the auto-fill value instead,
which ensures that the number of columns
that will be generated will be chosen dynamically
and automatically by the browser
based on the available screen width.
And that's amazing because then I don't have to worry
about picking the appropriate number of columns
for different screen sizes.
Instead, the browser will do it for me.
The browser will do it for me
with help of the second value I plan to repeat,
which is a value where I define
the size, the width of my columns.
And I'll do that with another built-in function,
which is called minmax.
That's a function which itself takes two values,
a minimum and a maximum value,
and then the browser will size the columns appropriately
based on their content
and the available space in the browser.
Now here I'll choose 15rem as a minimum value
for my columns and one fraction as a maximum value.
One fraction simply means that at a maximum,
the browser may squeeze as many columns as possible
for the given screen size,
into a given row where all the columns
should have the same width.
They should have one fraction of the available width.
The minimum width should be 15rem.
Without that, if we just would use one fraction,
the browser could squeeze 20 columns
into one of the same row,
as long as they have to same pretty small width.
That's why I set a minimum width as well.
Last but not least,
I'll add the gap CSS property,
which will define some spacing that will be used
between the columns so that there is some blank space
between the columns and rows.
And here I'll use space-4,
and gap sets spacing for both between columns and rows.
And that is all.
Now we just have to ensure that product.css
will be used.
And for that in the all-products.ejs file
in the admin folder,
here after including the head include,
I will now include /styles/products.css.
So that this CSS file is used for this page.
With that, if you reload,
this is how a single item looks like.
It's not fully done yet.
There is more to do, but this is a start.
What I will do for example, in addition,
is in product-item,
I will actually add a little div here,
a div because I have no specific semantic meaning
that I would want to add.
I just want to use it for styling purposes.
And I'll move the product title
and my actions into that div.
I do that because then I will give this div
a class of product-item-content.
And I'll give this inner div,
which holds my links and buttons,
a class of product-item-actions, by the way.
And I did that because, now in product.css,
I can target the product-item-content class
I just added.
And it's there where I actually want to add the padding now,
instead of the product-item itself,
which has the advantage that now there won't be any padding
between the box of this item and the image.
Now the image just also
should have to use rounded corners.
And to enforce that on the product-item,
where I set up the rounded corners,
I will add overflow: hidden.
This ensures that any content from inside this container
that would go outside of this container
is basically cut off.
And that ensures that the non-rounded corners of the image
are cut off to be rounded.
Now, I still have the padding here for my content.
And now of course we can work on the styling
of that actual content,
so the title in there,
and of the action buttons.
And I'll start with the title.
In product-item-content,
I want to target the h2 element
that can be found in there.
And I will give it
a font size of 1.25rem,
which is a bit smaller than it would otherwise have.
And I also want to reduce the margin to space-2 0
instead of the bigger margin which it would otherwise have.
With that, the title is a bit smaller.
Let's actually choose 1.15rem for the font size.
Now, of course, the buttons also don't look good like this.
Instead, here I want to target the
product-item actions class
that I added to this div that holds the anchor tag
and the button.
So let's target this.
And here we can actually give this a display of flex
to align these two items which sit in the same row,
and add a gap here,
which cannot just be used for the grid,
but also for Flexbox to add spacing between the flex items
of var space-2.
And give this some margin to the top actually,
of var space-4
to have some distance to the top.
Save this, and now we have these buttons here.
So now this looks better.
Now we styled this grid and the product items.
Now it is of course time to make sure
that we can also view and edit our products
before we then work on the image preview for uploading,
and we then finish all the product-related logic.
I also briefly want to mention and emphasize
that I do not optimize for responsive styles
when it comes to the administration area.
Most pages should work pretty well on smaller screens,
but unlike for the customer facing part,
I'm not optimizing for smaller screens
here in the admin area,
simply because we are the administrator
and we will administrate from a desktop device, typically.
So no optimizations here.
For the customer-facing sites, we of course,
do want to build them such that they also
look good on smaller screens.