Responsive Full Width Grid

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

Responsive Full Width Grid

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%;
	}
}

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 21

Comments are closed.
  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.

    • Hello, Egiova.

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

  2. 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. 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. Love this, but is there any possibility to let the browser show different sized pictures?

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

  6. Hi there,

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

  7. 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. She doesn’t only make unique experiments and applications but she is awesome -(:>

  9. 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.

  10. Hi,

    And thank you so much for this great code! I have used it but have run into a problem… when I add the links to the photographs, they either disappear or show up in different orders… it is very messed up. Yet, when I remove the links, they work perfectly again.

    What do you suppose would cause this problem?

    Thank you in advance! I really appreciate your work!

    With kind regards,
    Polkie