Responsive Full Width Grid

A responsive grid layout for multiple items in a row that fill all the available width.

Responsive Full Width Grid

View demo Download source

A layout for a full width flexible grid layout for images or other content. The items have a percentage width and some example media queries show how to adjust the items shown per row.

The HTML

<ul class="cbp-rfgrid">
	<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
	<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
	<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
	<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
	<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
	<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
	<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
	<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
	<!-- ... -->
</ul>

The CSS

.cbp-rfgrid {
	margin: 35px 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
	width: 100%;
}

.cbp-rfgrid li {
	position: relative;
	float: left;
	overflow: hidden;
	width: 16.6666667%; /* Fallback */
	width: -webkit-calc(100% / 6);
	width: calc(100% / 6);
}

.cbp-rfgrid li a,
.cbp-rfgrid li a img {
	display: block;
	width: 100%;
	cursor: pointer;
}

.cbp-rfgrid li a img {
	max-width: 100%;
}

/* Flexbox is used for centering the heading */
.cbp-rfgrid li a div {
	position: absolute;
	left: 20px;
	top: 20px;
	right: 20px;
	bottom: 20px;
	background: rgba(71,163,218,0.2);
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
    align-items: center;
    text-align: center;
    opacity: 0;
}

.cbp-rfgrid li a:hover div {
	opacity: 1;
}

.cbp-rfgrid li a div h3 {
	width: 100%;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.4em;
	letter-spacing: 2px;
	padding: 0 10px;
}

/* Example for media query: change number of items per row */

@media screen and (max-width: 1190px) {
	.cbp-rfgrid li {
		width: 20%; /* Fallback */
		width: -webkit-calc(100% / 5);
		width: calc(100% / 5);
	}
}

@media screen and (max-width: 945px) {
	.cbp-rfgrid li {
		width: 25%; /* Fallback */
		width: -webkit-calc(100% / 4);
		width: calc(100% / 4);
	}
}

@media screen and (max-width: 660px) {
	.cbp-rfgrid li {
		width: 33.3333333%; /* Fallback */
		width: -webkit-calc(100% / 3);
		width: calc(100% / 3);
	}
}

@media screen and (max-width: 660px) {
	.cbp-rfgrid li {
		width: 33.3333333%; /* Fallback */
		width: -webkit-calc(100% / 3);
		width: calc(100% / 3);
	}
}

@media screen and (max-width: 400px) {
	.cbp-rfgrid li {
		width: 50%; /* Fallback */
		width: -webkit-calc(100% / 2);
		width: calc(100% / 2);
	}
}

@media screen and (max-width: 300px) {
	.cbp-rfgrid li {
		width: 100%;
	}
}

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 19

Comments are closed.
  1. 1

    Just a question: So, the hover effect is centered because of the Flexbox applied on header? Am I correct?
    Another one: From where comes from this 16,6666667% ? I assume you didn’t picked it randomly. And why 7 fractions?
    I’m curious (I wonder if E. Marcotte visit you recently…).

    But, nice experiment in the end, worth trying with different margins and padding, and extravagant percentages too. Just for fun.
    As usual, thanks for sharing.

    • 2

      Hello, Egiova.

      About 16,6666667%, I believe it is the result of dividing by 6 blocks of such window (in this case ,100%).

  2. 4

    Hi, I see you’ve used the calc functions as well as specifying a percentage fallback. Is there any reason it would be better to have the browser calculate these values itself (i.e. rounding errors)? Also has anybody heard of any performance drawbacks of using the calc function? Thanks.

  3. 6

    Is there a way to integrate fancy box with this. as in when the image is clicked, the image pops up.
    trying to implement that but i’m not able to sort it out

  4. 9

    Love this, but is there any possibility to let the browser show different sized pictures?

  5. 10

    Wow! Amazing! But, it is working on IE9/10? I tested in these browsers and no success — the last column is empty.

  6. 12

    Hi there,

    This doesn’t seem to be centering the hover in Firefox 20…

  7. 13

    I made a workaround on my implementation, using a percentage for the top padding so it’s a fake centering but does the trick =X

    I combined this one with the filter functionality tutorial, you can see it coming along here > http://menosketiago.com/mock.html#work

    I really want to thank you since this is the best coding site for designers out there!

  8. 15

    She doesn’t only make unique experiments and applications but she is awesome -(:>

  9. 16

    Hey
    How is the height defined? also, not all sizes of images can adjust inside the blocks. wide width images doesnt cover the entire blocks and leaves huge space beneath it. I guess the text wraps around the size of the image. any way to make it independent?

    do reply even if u dont intend to answer. no offence.

Comments are closed.