In this video, we're going to do the bulk of styling.

If you go to the Pinterest site, you'll see the pins are free-flowing and fit well within the page. This is exactly what we'll do with our site too.

As a first thing, we'll create a set of styles for our wrapper. We'll work on our width, which we'll leave at 90%. Let's also set a max-width and min-width so that the wrapper is always within a range of 800px to 1100px. Next, we'll set the margins to 50px on all sides, and also use the auto mode to ensure that everything is centered.

#wrapper {
    width: 90%;
    max-width: 1100px;
    min-width: 800px;
    margin: 50px auto;
}

Next, we'll work on styling our images. We'll start with the CSS selector columns, and inside this, we'll add the styling options for every browser too.

#columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 10px;
    column-fill: auto;
}

This code is a good way to organize different columns on a page, and if you see the output, it's shaping up well.

Next, we'll define style for our class pin. If you remember, this is the class we're using for all the images.

To start off, we want it to be displayed as an "inline-block", so they're not stacked on top of each other. We'll set the background to a shade of white, and a border of solid white that is about 2px wide on all sides. Both these shades of white are slightly different to give a subtle distinction. Now, we're going to use an interesting attribute called box-shadow.

We'll set the values for this attribute to "0, 1px, 2px, and rgba (34, 25, 25, 0.4)". If you're wondering why we're using rgba instead of a hexadecimal value, it's because we want to give some transparency here. The first three values stand for red, green and blue, and the fourth is for transparency.

Moving on, let's add some margin on the right and bottom. Then, we need something like a column break. For this again, we need to implement it separately for each browser, as this is specific to HTML5.

.pin {
    display: inline-block;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0px 2px 15px 0px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;

We'll also add a padding of 15px on all sides, except the bottom where we'll have only 5px.
Then, I think adding a gradient will be nice, and yet again, this has to be done separately for each browser. Essentially, we want the gradients to be tilted at 45 degrees, and we want it to go from a shade of pure white to off-white. Let's keep the opacity at 1, and finally the transition to two seconds.

.pin {
    display: inline-block;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0px 2px 15px 0px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px 15px 5px 15px;
    background: -webkit-linear-gradient(45deg #FFF, #F9F9F9);
    opacity: 1;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

I guess that's about everything we need for our pins.

Next, let's update the style for our images.

We'll set the width to 100%, and have a 1px thick border at the bottom of every image. I think some padding and a margin at the bottom would be nice.

.pin img {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}

Then, we need some styles for our paragraph tag too. We'll change the font size to be from 12px to 18px, family to be Arial, and a backup font value to be sans-serif. The color will be black, and margins will be 0px.

.pin p {
    font: 12px/18px Arial, sans-serif;
    color: #333;
    margin: 0;
}

Finally, we'll set the hover effects for our images. For this, we'll set the border-radius to 20px, and let's also change the cursor to a pointer.

.pin:hover {
    border-radius: 20px;
    cursor: pointer;
}

That's it! Let's see how it looks in the browser now.

I think it looks great!

If you look at the images, it may look like we're using a break tag between the image and text, but in reality, this is nothing but a border that we've included at the bottom of every image. This is a better way to implement because sometimes we may just have images without any text. In such a case, the break line is unnecessary, and can even look a little out of place. This is why we are accomplishing the same effect with a border, instead of using a break line.