Skip to content

Instantly share code, notes, and snippets.

@colingourlay
Last active Jun 1, 2018
Embed
What would you like to do?
Mosaic with CSS grid
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 50vw);
grid-template-rows: repeat(auto-fill, 50vw);
}
.box {
box-sizing: border-box;
height: 50vw;
}
@media all and (min-width: 30rem) {
.wrapper {
grid-template-columns: repeat(auto-fill, 33.33vw );
grid-template-rows: repeat(auto-fill, 33.33vw );
}
.box {
height: 33.33vw;
}
}
@media all and (min-width: 60rem) {
.wrapper {
grid-template-columns: repeat(auto-fill, 25vw);
grid-template-rows: repeat(auto-fill, 25vw);
}
.box {
height: 25vw;
}
}
<div class="wrapper">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>
<div class="box">F</div>
<div class="box">G</div>
<div class="box">H</div>
<div class="box">I</div>
<div class="box">J</div>
<div class="box">K</div>
<div class="box">L</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment