A fairly unusual layout that I was requested to develop using CSS grid. On large viewports, the two middle columns are the same width however the remaining two columns are both larger and smaller in width. There is also an item that spans two columns. It was up to me to decide what it should look like on smaller viewports (tablets, smartphones) since there was no prototype for those layouts provided to me. There is also a reversed (or mirrored) version.
HTML
<section class="content mblock-5 mblock-med-4 mblock-sml-3 fade-in">
<div class="content-collage">
<div class="collage-paragraph">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla ex risus, vel malesuada dui scelerisque tincidunt. Vestibulum volutpat nisi justo, in condimentum quam feugiat ut. Pellentesque cursus interdum pellentesque. Pellentesque feugiat cursus tellus nec porttitor. Sed mi nulla, dignissim id cursus at, pellentesque eget felis. Nunc vulputate quam consectetur dui vestibulum malesuada. Sed sed urna at mi fermentum dapibus. Fusce fermentum ullamcorper risus, a commodo massa dapibus ac. Aliquam nec tincidunt mi. Quisque facilisis facilisis viverra.</p>
</div>
<a href="#" class="collage-image">
<img src="https://loremflickr.com/1054/558">
<span>Item 1</span>
</a>
<a href="#" class="collage-image">
<img src="https://loremflickr.com/1054/558">
<span>Item 2</span>
</a>
<a href="#" class="collage-text">
<span>Item 3</span>
</a>
<a href="#" class="collage-image short">
<img src="https://loremflickr.com/1054/558">
<span>Item 4</span>
</a>
<a href="#" class="collage-image short">
<img src="https://loremflickr.com/1054/558">
<span>Item 5</span>
</a>
<a href="#" class="collage-image short sacrifice">
<img src="https://loremflickr.com/1054/558">
<span>Item 6</span>
</a>
</div>
</section>
<section class="content mblock-5 mblock-med-4 mblock-sml-3 fade-in">
<div class="content-collage reverse">
<a href="#" class="collage-image">
<img src="https://loremflickr.com/1054/558">
<span>Item 1</span>
</a>
<a href="#" class="collage-image">
<img src="https://loremflickr.com/1054/558">
<span>Item 2</span>
</a>
<div class="collage-paragraph reverse">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla ex risus, vel malesuada dui scelerisque tincidunt. Vestibulum volutpat nisi justo, in condimentum quam feugiat ut. Pellentesque cursus interdum pellentesque. Pellentesque feugiat cursus tellus nec porttitor. Sed mi nulla, dignissim id cursus at, pellentesque eget felis. Nunc vulputate quam consectetur dui vestibulum malesuada. Sed sed urna at mi fermentum dapibus. Fusce fermentum ullamcorper risus, a commodo massa dapibus ac. Aliquam nec tincidunt mi. Quisque facilisis facilisis viverra.</p>
</div>
<a href="#" class="collage-image short">
<img src="https://loremflickr.com/1054/558">
<span>Item 3</span>
</a>
<a href="#" class="collage-image short">
<img src="https://loremflickr.com/1054/558">
<span>Item 4</span>
</a>
<a href="#" class="collage-image short sacrifice">
<img src="https://loremflickr.com/1054/558">
<span>Item 5</span>
</a>
<a href="#" class="collage-text">
<span>Item 6</span>
</a>
</div>
</section>CSS
// **************************************************
// Content
// **************************************************
// Typically used within elements that are
// children of the element
.content {
max-width: 1660px;
padding-inline: 1em;
margin-inline: auto;
margin-block: 5em;
}
// **************************************************
// Content Collage
// **************************************************
.content-collage {
display: grid;
gap: 1em;
grid-template-columns: 0.60fr 0.875fr 0.875fr 1.2fr; // 265px, 388px, 388px, 530px on viewports >= 1680px
grid-template-rows: 344px 213px;
@media (max-width: 1300px) {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
}
@media (max-width: 1024px) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 500px) {
grid-template-columns: 1fr;
}
}
.collage-paragraph {
grid-column: span 2;
@media (max-width: 1300px) {
grid-column: span 4;
}
@media (max-width: 1024px) {
grid-column: span 2;
}
@media (max-width: 500px) {
grid-column: span 1;
}
}
.collage-paragraph {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.5em;
> p {
margin-bottom: 1em;
}
}
.collage-image {
display: flex;
flex-direction: column;
color: #fff;
text-decoration: none;
img {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
width: 100%;
object-fit: cover;
}
span {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
padding: 0.75em;
background-color: #8082bd;
color: #fff;
font-size: 1.4rem;
line-height: 1;
text-transform: uppercase;
transition: all 0.3s;
@media (max-width: 1300px) {
font-size: 1rem;
font-weight: 400;
}
}
&:hover,
&:focus {
span {
background-color: #3f9338;
}
}
&.short {
img {
max-height: 159px;
@media (max-width: 1024px) {
max-height: 100%;
}
}
}
// this layout looks weird on small viewports with more than 4 .item-image elements
// to make life easier, we'll just hide (or 'sacrifice') the very last element
// the page gets too busy on smaller viewports with all of these anyway
&.sacrifice {
@media (max-width: 1300px) {
display: none;
}
}
}
.collage-text {
display: flex;
flex-direction: column;
justify-content: center;
background-color: #8082bd;
color: #fff;
text-decoration: none;
transition: all 0.3s;
span {
text-align: center;
font-size: 3rem;
line-height: 1;
text-transform: uppercase;
}
&:hover,
&:focus {
background-color: #3f9338;
}
@media (max-width: 1300px) {
display: none;
}
}
// **************************************************
// Content Collage (Reverse)
// **************************************************
.content-collage.reverse {
grid-template-columns: 1.2fr 0.875fr 0.875fr 0.60fr; // 530px, 388px, 388px, 265px on viewports >= 1680px
@media (max-width: 1300px) {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 500px) {
grid-template-columns: 1fr;
}
}
.collage-paragraph {
@media (max-width: 1300px) {
grid-row: 1;
}
}