Grid Gallery Using Floats: It Can Be Done!

Creating a gallery in a grid layout can be tricky. Especially when using floats.

Admittedly, I prefer flexbox. It is so much easier to use, more intuitive, and is very powerful. When I first learned about floats, I understood, at the time, this was the best way of creating layouts, especially when you need things to sit right next to each other.

When I was introduced to flexbox, dare I say it was a game-changer. All that time spent over crying over broken float layouts can be solved with flexbox!

I was presented with a challenge: make a grid gallery without using flexbox, and instead use ONLY floats. My insides tensed up in fear.

I wanted to place screenshots of four different projects I had created. Taking screenshots is tricky because the images turn out to be too wide. Since the section where the gallery is located is 100vh, I needed the bottom row to reach the bottom of the screen. Screenshots prove to be the wrong type of image to use for this effect.

In reference to this post, I had a situation where I did not know if I should use background images inside the div in the CSS document or embed images in the HTML document. My first instinct was to place the images in the HTML document, however reflecting upon my experience in this post, I decided to make each div have a background image.

My styling looks something like this:

.portfolio__container {
/*display: flex;*/ /*DO NOT USE FLEXBOX!!*/
height: 100vh;
}

.portfolio__item {
float: left;
/*overflow: hidden;*/
position: relative;
text-align: left;
}

.portfolio__item — 1,
.portfolio__item — 2,
.portfolio__item — 3,
.portfolio__item — 4 {
background-size: cover;
height: 50%;
width: 50%;
opacity: 0.8;
transition: 0.8s all ease;
}

.portfolio__item — 1 {
background-image: url(images/clemo.jpg);
}

.portfolio__item — 2 {
background-image: url(images/travel.jpg);
}

.portfolio__item — 3 {
background-image: url(images/soundbyte.jpg);
}

.portfolio__item — 4 {
background-image: url(images/lawyer.jpg);
}

Since the specific .portfolio_item classes were both a width and height of 50%, I need images to properly fill this space up. Because the screenshots were too wide, and not high enough, the images became cropped, and the section had unnecessary white space underneath the images. Talking with my instructor at HackerYou, she suggested a splash image as a kind of preview of the website. I chose large images that I knew would for sure fill up the div space nicely.

This is the final product.

I am happy with the final product. It’s just as simple as making the first class, in this case, .portfolio__item float left, and then with the second classes, such as .portfolio__item — 1, a height and width of 50%. Making sure the background is background-size:cover; and setting a specific image in the background-image property can make a successful grid gallery!

It’s not so great in responsive however…the images get cropped.

Next time, I will definitely consider having the images stack in one column.