<main>
<header><h1>It is M1ll3r Time!</h1></header>
<section class="grid">
<img src="http://c1.staticflickr.com/8/7239/13418977584_fa1cf3f009_b.jpg"/>
<img src="http://c1.staticflickr.com/8/7309/16503496126_b021994bef_k.jpg"/>
<img src="http://c1.staticflickr.com/9/8581/16268611292_0f82738c4e_k.jpg"/>
<img src="http://c1.staticflickr.com/8/7518/15431601544_4a15b8d094_b.jpg"/>
<img src="http://c1.staticflickr.com/9/8678/16163791508_4817c40ee7_b.jpg"/>
<img src="http://c1.staticflickr.com/8/7559/15687183335_e81b576f02_b.jpg"/>
<img src="http://c1.staticflickr.com/3/2813/13684089674_8837fca20c_b.jpg"/>
<img src="http://c1.staticflickr.com/8/7386/13525267803_52aac3537b_b.jpg"/>
</section>
<footer>Footer</footer>
</main>
/*Downloaded from https://www.codeseek.co/etuan/get-ready-for-css-grid-3-boxy-with-margins-instead-of-gutters-PWQJoW */
body, html {
height: 100%;
font-family: 'open sans';
background-color: #3e3e3e;
}
header, footer {
text-align: center;
}
footer {
padding: 2rem 0;
}
img {
object-fit: cover;
margin-bottom: calc(.5rem - 4px);
max-width: 100%;
width: 100%;
border-radius: 10px;
}
@media all and (min-width: 500px) {
img {
max-width: calc(100% - .5rem);
max-height: calc(100% - .5rem);
width: auto;
margin: 0 .5rem .5rem 0;
}
.grid {
margin: 0 auto;
width: 100%;
min-height: 100%;
display: grid;
grid-template-columns: 50% / 50%;
// grid-template-rows: 25% / 33% / 17% / 25%;
}
img {
grid-row: auto / span 1;
}
img:nth-of-type(1),
img:nth-of-type(4),
img:nth-of-type(5) {
grid-column: 1 / span 1;
}
img:nth-of-type(2),
img:nth-of-type(7),
img:nth-of-type(8) {
grid-column: 2 / span 1;
}
img:nth-of-type(3),
img:nth-of-type(6) {
grid-column: 1 / span 2;
}
img:nth-of-type(7) {
grid-row: 3 / span 1;
}
img:nth-of-type(5),
img:nth-of-type(8) {
grid-row: 5 / span 1;
}
img:nth-of-type(2),
img:nth-of-type(3),
img:nth-of-type(6),
img:nth-of-type(7),
img:nth-of-type(8) {
margin-right: 0;
max-width: 100%;
// this is stupid... but oh well. mabye the gutters will be worth it.
}
@media all and (min-width: 768px) {
.no-gutter {
margin-right: 0;
max-width: 100%;
// this is stupid... but oh well. mabye there's a reason for gutters after all.
}
.reset {
grid-row: auto;
margin: 0 .5rem .5rem 0;
max-width: calc(100% - .5rem);
// this is even stupider from here to jupiter.
}
.grid {
grid-template-columns: 33% / auto / 25%;
// grid-template-rows: 25% / 33% / 17% / 25%;
}
img:nth-of-type(1) {
@extend .reset;
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
img:nth-of-type(2) {
@extend .reset;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
img:nth-of-type(3) {
@extend .reset;
grid-column: 1 / span 2;
grid-row: 2 / span 1;
}
img:nth-of-type(4) {
grid-column: 3 / span 1;
grid-row: 1 / span 2;
@extend .no-gutter;
}
img:nth-of-type(5) {
@extend .reset;
grid-column: 2 / span 1;
grid-row: 4 / span 1;
}
img:nth-of-type(7) {
@extend .reset;
grid-column: 1 / span 1;
grid-row: 3 / span 2;
}
img:nth-of-type(6) {
grid-column: 2 / span 2;
grid-row: 3 / span 1;
@extend .no-gutter;
}
img:nth-of-type(8) {
grid-column: 3 / span 1;
grid-row: 4 / span 1;
@extend .no-gutter;
}
}
@media all and (min-width: 960px) {
.grid {
grid-template-columns: 25% / 25% / 25% / 25%;
// grid-template-rows: 25% / 33% / 17% / 25%;
}
img:nth-of-type(1) {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
img:nth-of-type(2) {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
margin: 0 .5rem .5rem 0;
max-width: calc(100% - .5rem);
}
img:nth-of-type(3) {
grid-column: 1 / span 2;
grid-row: 2 / span 1;
margin: 0 .5rem .5rem 0;
max-width: calc(100% - .5rem);
}
img:nth-of-type(4) {
grid-column: 3 / span 1;
grid-row: 1 / span 2;
margin: 0 .5rem .5rem 0;
max-width: calc(100% - .5rem);
}
img:nth-of-type(5) {
grid-column: 4 / span 1;
grid-row: 1 / span 1;
margin-right: 0;
max-width: 100%;
}
img:nth-of-type(7) {
grid-column: 1 / span 2;
grid-row: 3 / span 2;
margin: 0 .5rem .5rem 0;
max-width: calc(100% - .5rem);
}
img:nth-of-type(6) {
grid-column: 3 / span 2;
grid-row: 3 / span 2;
}
img:nth-of-type(8) {
grid-column: 4 / span 1;
grid-row: 2 / span 1;
}
}
}
/*Downloaded from https://www.codeseek.co/etuan/get-ready-for-css-grid-3-boxy-with-margins-instead-of-gutters-PWQJoW */