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:

ML 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://www.codrops.com

Related Articles

Receive our bi-weekly Collective or blog updates right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.