Responsive Grid Layout for Landing Pages

Responsive grid layout

You may have come across some websites with interactive, inspiring, and responsive grid layouts for landing pages. These kinds of pages provide a fun and engaging user experience and display information in a structured fashion. The cells in these layouts can have hover effects such as changes in brightness or translucent color backgrounds.

Here are a few excellent real-world examples:

The responsive grid layout we’ll create in this tutorial is inspired by the grid view page in the Logistic WordPress Theme example. I picked eight free transportation-themed images from Pixabay for each cell’s background image, but you can use whatever images you want.

The HTML

We’re going to create a grid system similar to that of Bootstrap. Bootstrap’s grid system allows up to 12 columns per row, so the column class names are based on the number of occupied twelfths. For example, content that spans over eight columns in a row will use a class of col-*-8 (* is replaced with sizes lg, md, sm, or xs, but we’re not going to use those here), meaning eight twelfths or two thirds of the row is used.

Two-Cell Row

To create up a row with two large cells, we’ll set up a row div containing two col-6 divs to be used for six-column cells. Those two divs are the cells that will occupy each half of the row. Then, we’ll use the inline CSS below to specify the background image for each cell.

<div class="row">
    <div class="col-6" style="background-image:url(airplane.jpg);">

    </div>
    <div class="col-6" style="background-image:url(tractor-trailer.jpg);">

    </div>
</div>

Inside the col-6 divs, we’ll insert a cell-content div for the cell’s contents. Then in those divs, we’ll insert a cell-hover-content div for the cell’s hover state.

<div class="row">
    <div class="col-6" style="background-image:url(airplane.jpg);">
        <div class="cell-content">
             <div class="cell-hover-content">

             </div>
        </div>
    </div>
    <div class="col-6" style="background-image:url(tractor-trailer.jpg);">
        <div class="cell-content">
             <div class="cell-hover-content">

             </div>
        </div>
    </div>
</div>

As the first item in each cell-content div, we’ll insert the initial content. Then to link each cell to another page, we place the cell-hover-content divs inside <a> tags. For the hover state, we want see more content while the heading remains. So here, we’ll copy and paste the heading there and include the paragraph we want to see.

<div class="row">
    <div class="col-6" style="background-image:url(airplane.jpg);">
        <div class="cell-content">
            <h3>Cell Heading</h3>
            <a href="#">
                <div class="cell-hover-content">
                    <h3>Cell Heading</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </a>
       </div>
    </div>
    <div class="col-6" style="background-image:url(tractor-trailer.jpg);">
        <div class="cell-content">
            <h3>Cell Heading</h3>
            <a href="#">
                <div class="cell-hover-content">
                    <h3>Cell Heading</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </a>
        </div>
    </div>
</div>

Three-Cell Row

The process for the rest of the row structures should nearly be the same except that we’ll use three cells that are four columns wide. They’ll use col-4 to define cells that span over four of the twelve columns in our grid system.

<div class="row">
    <div class="col-4" style="background-image:url(bike.jpg);">
        <div class="cell-content">
            <h3>Cell Heading</h3>
            <a href="#">
                <div class="cell-hover-content">
                    <h3>Cell Heading</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </a>
        </div>
    </div>
    <div class="col-4" style="background-image:url(concrete-mixer.jpg);">
         <div class="cell-content">
             <h3>Cell Heading</h3>
             <a href="#">
                <div class="cell-hover-content">
                    <h3>Cell Heading</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
             </a>
        </div>
    </div>
    <div class="col-4" style="background-image:url(crane.jpg);">
        <div class="cell-content">
            <h3>Cell Heading</h3>
            <a href="#">
                <div class="cell-hover-content">
                    <h3>Cell Heading</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </a>
        </div>
    </div>
</div>

Row Structure of ½ + ¼ + ¼

This last row will contain three cells except that the first will be six columns wide and the other two will each be three columns wide.

<div class="row">
    <div class="col-6" style="background-image:url(school-bus.jpg);">
        <div class="cell-content">
            <h3>Cell Heading</h3>
            <a href="#">
                <div class="cell-hover-content">
                    <h3>Cell Heading</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </a>
        </div>
    </div>
    <div class="col-3" style="background-image:url(street.jpg);">
        <div class="cell-content">
            <h3>Cell Heading</h3>
            <a href="#">
                <div class="cell-hover-content">
                    <h3>Cell Heading</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </a>
        </div>
    </div>
    <div class="col-3" style="background-image:url(rush-hour.jpg);">
        <div class="cell-content">
            <h3>Cell Heading</h3>
            <a href="#">
                <div class="cell-hover-content">
                    <h3>Cell Heading</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </a>
        </div>
    </div>
</div>

Contents After the Grid

Since we are going to float the cells to the left in the CSS, we’ll use a footer for clearing the float. Then the content in here should display normally once we apply the clear in the CSS later.

<footer>
    <p>Footer Content</p>
</footer>

The CSS

To style our responsive grid layout, let’s begin with the styles for the largest window size. We must ensure that image backgrounds cover their entire cells, are centered, and never repeat. Also, the cells will float left and have a height of 280px. .col-3 will use a width of 25%, as it should use up three twelfths or one fourth of a row. Then .col-4 and .col-6 shall use widths of 33.33% and 50% because 4 / 12 ≅ 0.33 and 6 / 12 = 0.5.

/* Extra Large (Global) */
.col-3, .col-4, .col-6 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    float: left;
    height: 280px;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.33%
}
.col-6 {
    width: 50%
}

The color of all cell content text will be white including anything inside a elements. Then the cell will use top and bottom paddings of 5 pixels and 15 pixels respectively, and the hover contents will be absolutely positioned relative to the cell. The link text decoration here shall be removed as well.

.cell-content {
    color: #fff;
    padding: 5px 15px;
    position: relative;
}
.cell-content a {
    color: #fff;
    text-decoration: none;
}

To ensure the hover content in each cell appears on top of its normal version, we’ll give them top and left values of 0 and apply the same padding values as well. These divs will use the same height of 280px as their normal counterparts and a width of 100%. Moreover, we’ll place the height and width values inside calc() functions to prevent these divs from bleeding outside of their places.

Then in the first calc() function, we’ll subtract the combined top and bottom paddings from the height. In the second one, we’ll subtract the combined left and right paddings from the width. The divs here will use an opacity of 0 because on hover, we want to use a transition for the contents to fade in. For every cell’s hover content, we’ll use a shade of orange for their hover state. Note that the color is in RGBA format because we’e looking for a transparency effect with the background color and background image.

.cell-hover-content {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 15px;
    height: calc(280px - 5px * 2);
    width: calc(100% - 15px * 2);
    opacity: 0;
    transition: opacity 0.25s;
}
.cell-hover-content:hover {
    background-color: rgba(255,102,34,0.8);
    opacity: 1;
}

Other Viewports

For smaller viewports, we’ll just reduce the cell heights by 20 pixels to ensure a smooth transition from desktop to mobile.

/* Large */
@media screen and (min-width: 981px) and (max-width: 1200px) {
    .col-3, .col-4, .col-6 {
        height: 260px;
    }
    .cell-hover-content {
        height: calc(260px - 5px * 2);
    }
}
/* Medium */
@media screen and (min-width: 801px) and (max-width: 980px) {
    .col-3, .col-4, .col-6  {
        height: 240px;
    }
    .cell-hover-content {
        height: calc(240px - 5px * 2);
    }
}
/* Small */
@media screen and (min-width: 768px) and (max-width: 800px) {
    .col-3, .col-4, .col-6 {
        height: 220px;
    }
    .cell-hover-content {
        height: calc(220px - 5px * 2);
    }
}

In addition, we’ll remove the floats and set the width of all cells to 100% to make their contents easier to read in mobile.

/* Mobile */
@media screen and (max-width: 767px) {
     .col-3, .col-4, .col-6 {
        float: none;
        height: 200px;
        width: 100%;
    }
   .cell-hover-content {
        height: calc(200px - 5px * 2);
    }
}

Clearing the Floats

And finally, to make sure we don’t have any display issues with the footer element underneath the grid, we’ll clear the left floats and add some padding to allow sufficient spacing between the bottom the grid and the first line text.

footer {
    clear: left;
    padding: 5px 15px;
}

Conclusion

Given these points, I hope this tutorial has given you a method for building such attractive home pages that works well. You can employ these grid systems to easily create appealing and responsive landing pages from scratch. You can arrange the cells in each row in any order you want as long as their widths (in columns) add up to 12.


Posted in: CSS, HTML