Build three different responsive CSS grid layouts from scratch 502 words.
Last Updated
The following lesson contains three examples of CSS Grid layouts.
Bootstrap-Style 12 Column Grid
Grid can significantly reduce the amount of code required to build responsive row/column layouts. Unlike a flex-based grid like Bootstrap, it does not require a bunch of classes in the markup to make the children responsive.
The grid below is an example of an implicit grid because we do not know the exact number of rows or columns in advance. Instead, we let CSS fill the available space based on the device size.
HTML
<section class="basic-grid">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>
<div class="card">10</div>
<div class="card">11</div>
<div class="card">12</div>
</section>
CSS
.basic-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
Responsive Photo Gallery
The next grid is a responsive photo gallery where photos can take up multiple cells. Like the previous example, it is also an implicit grid.
HTML
<div class="photo-grid">
<div class="card" style="background-image: url('some-image-URL')">
1
</div>
<div class="card card-tall" style="background-image: url('some-image-URL')">
2
</div>
<div class="card card-wide" style="background-image: url('some-image-URL')">
3
</div>
<!-- Add more items here -->
</div>
CSS
.photo-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-auto-rows: 240px;
}
/* Medium screens */
@media screen and (min-width: 600px) {
.card-tall {
grid-row: span 2 / auto;
}
.card-wide {
grid-column: span 2 / auto;
}
}
Animated Explicit Grid
The third grid example is a 4x4 explicit grid where each element is placed in specific area by name. The grid-template-areas property can position elements in the grid by matching the grid-area property on the children.
HTML
<section class="animated-grid">
<div class="card">a</div>
<div class="card">b</div>
<div class="card">c</div>
<div class="card">d</div>
<div class="card">e</div>
<div class="card">f</div>
<div class="card">g</div>
<div class="card">h</div>
<div class="card">i</div>
<div class="card">j</div>
<div class="card">k</div>
<div class="card">l</div>
<div class="card">main</div>
</section>
CSS
.animated-grid {
height: 85vh;
margin-bottom: 200px;
display: grid;
gap: 1rem;
/* Explicit grid */
grid-template-areas:
'a b c d'
'l 🌟 🌟 e'
'k 🌟 🌟 f'
'j i h g';
grid-template-rows: repeat(4, 25%);
grid-template-columns: 240px auto auto 240px;
--stagger-delay: 100ms;
}
@keyframes cardEntrance {
from {
opacity: 0;
transform: scale(0.3);
filter: hue-rotate(180deg);
}
to {
opacity: 1;
transform: scale(1);
filter: hue-rotate(0deg);
}
}
.card {
background-color: rgb(36, 243, 147);
animation: cardEntrance 700ms ease-out;
animation-fill-mode: backwards;
}
.card:nth-child(1) {
grid-area: a;
animation-delay: calc(1 * var(--stagger-delay));
}
.card:nth-child(2) {
grid-area: b;
animation-delay: calc(2 * var(--stagger-delay));
}
.card:nth-child(3) {
grid-area: c;
animation-delay: calc(3 * var(--stagger-delay));
}
.card:nth-child(4) {
grid-area: d;
animation-delay: calc(4 * var(--stagger-delay));
}
.card:nth-child(5) {
grid-area: e;
animation-delay: calc(5 * var(--stagger-delay));
}
.card:nth-child(6) {
grid-area: f;
animation-delay: calc(6 * var(--stagger-delay));
}
.card:nth-child(7) {
grid-area: g;
animation-delay: calc(7 * var(--stagger-delay));
}
.card:nth-child(8) {
grid-area: h;
animation-delay: calc(8 * var(--stagger-delay));
}
.card:nth-child(9) {
grid-area: i;
animation-delay: calc(9 * var(--stagger-delay));
}
.card:nth-child(10) {
grid-area: j;
animation-delay: calc(10 * var(--stagger-delay));
}
.card:nth-child(11) {
grid-area: k;
animation-delay: calc(11 * var(--stagger-delay));
}
.card:nth-child(12) {
grid-area: l;
animation-delay: calc(12 * var(--stagger-delay));
}
.card:last-child {
grid-area: 🌟;
animation-delay: calc(13 * var(--stagger-delay));
}