├── README.md
└── public
├── animated-grid.css
├── animated-grid.html
├── base.css
├── basic-grid.css
├── basic-grid.html
├── photo-grid.css
└── photo-grid.html
/README.md:
--------------------------------------------------------------------------------
1 | # Responsive Animated CSS Grid Examples
2 |
3 | Watch the full [CSS Grid Video Tutorial](https://youtu.be/705XCEruZFs) on YouTube
--------------------------------------------------------------------------------
/public/animated-grid.css:
--------------------------------------------------------------------------------
1 | .animated-grid {
2 | height: 85vh;
3 | margin-bottom: 200px;
4 |
5 | display: grid;
6 | gap: 1rem;
7 |
8 | /* Explicit grid */
9 | grid-template-areas:
10 | 'a b c d'
11 | 'l 🌟 🌟 e'
12 | 'k 🌟 🌟 f'
13 | 'j i h g';
14 |
15 | grid-template-rows: repeat(4, 25%);
16 | grid-template-columns: 240px auto auto 240px;
17 |
18 | --stagger-delay: 100ms;
19 | }
20 |
21 | @keyframes cardEntrance {
22 | from {
23 | opacity: 0;
24 | transform: scale(0.3);
25 | filter: hue-rotate(180deg);
26 | }
27 | to {
28 | opacity: 1;
29 | transform: scale(1);
30 | filter: hue-rotate(0deg);
31 | }
32 | }
33 |
34 | .card {
35 | background-color: rgb(36, 243, 147);
36 | animation: cardEntrance 700ms ease-out;
37 | animation-fill-mode: backwards;
38 | }
39 |
40 | .card:nth-child(1) {
41 | grid-area: a;
42 | animation-delay: calc(1 * var(--stagger-delay));
43 | }
44 | .card:nth-child(2) {
45 | grid-area: b;
46 | animation-delay: calc(2 * var(--stagger-delay));
47 | }
48 | .card:nth-child(3) {
49 | grid-area: c;
50 | animation-delay: calc(3 * var(--stagger-delay));
51 | }
52 | .card:nth-child(4) {
53 | grid-area: d;
54 | animation-delay: calc(4 * var(--stagger-delay));
55 | }
56 | .card:nth-child(5) {
57 | grid-area: e;
58 | animation-delay: calc(5 * var(--stagger-delay));
59 | }
60 | .card:nth-child(6) {
61 | grid-area: f;
62 | animation-delay: calc(6 * var(--stagger-delay));
63 | }
64 | .card:nth-child(7) {
65 | grid-area: g;
66 | animation-delay: calc(7 * var(--stagger-delay));
67 | }
68 | .card:nth-child(8) {
69 | grid-area: h;
70 | animation-delay: calc(8 * var(--stagger-delay));
71 | }
72 | .card:nth-child(9) {
73 | grid-area: i;
74 | animation-delay: calc(9 * var(--stagger-delay));
75 | }
76 | .card:nth-child(10) {
77 | grid-area: j;
78 | animation-delay: calc(10 * var(--stagger-delay));
79 | }
80 | .card:nth-child(11) {
81 | grid-area: k;
82 | animation-delay: calc(11 * var(--stagger-delay));
83 | }
84 | .card:nth-child(12) {
85 | grid-area: l;
86 | animation-delay: calc(12 * var(--stagger-delay));
87 | }
88 | .card:last-child {
89 | grid-area: 🌟;
90 | animation-delay: calc(13 * var(--stagger-delay));
91 | }
92 |
--------------------------------------------------------------------------------
/public/animated-grid.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Animated Grid
7 |
8 |
12 |
13 |
14 | Animated Grid
15 |
16 |
20 |
24 |
28 |
32 |
36 |
40 |
44 |
48 |
52 |
56 |
60 |
64 |
68 |
69 |
70 |
71 | a
72 | b
73 | c
74 | d
75 | e
76 | f
77 | g
78 | h
79 | i
80 | j
81 | k
82 | l
83 | main
84 |
85 |
86 |
87 |
88 |
--------------------------------------------------------------------------------
/public/base.css:
--------------------------------------------------------------------------------
1 |
2 | @import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');
3 |
4 | body {
5 | background: rgb(19, 19, 19);
6 | color: #fff;
7 | font-family: 'Noto Sans', sans-serif;
8 | }
9 |
10 | .card {
11 | display: flex;
12 | flex-direction: column;
13 | justify-content: center;
14 | align-items: center;
15 | background: #353535;
16 | font-size: 3rem;
17 | color: #fff;
18 | box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
19 | height: 100%;
20 | width: 100%;
21 | border-radius: 4px;
22 | transition: all 500ms;
23 | overflow: hidden;
24 |
25 | background-size: cover;
26 | background-position: center;
27 | background-repeat: no-repeat;
28 | }
29 |
30 | .card:hover {
31 | box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
32 | transform: translateY(-3px) scale(1.1);
33 | }
34 |
35 |
--------------------------------------------------------------------------------
/public/basic-grid.css:
--------------------------------------------------------------------------------
1 | .basic-grid {
2 | display: grid;
3 | gap: 1rem;
4 |
5 | /* 1 too skinny, too much code */
6 | /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
7 |
8 | /* 2 cleaner code */
9 | /* grid-template-columns: repeat(12, 1fr); */
10 |
11 | /* 3 better sizing, but overflows */
12 | /* grid-template-columns: repeat(12, minmax(240px, 1fr)); */
13 |
14 | /* 4 final */
15 | grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
16 | }
--------------------------------------------------------------------------------
/public/basic-grid.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Basic Grid
7 |
8 |
12 |
13 |
14 |
15 | Auto fill
16 |
17 |
18 | 1
19 | 2
20 | 3
21 | 4
22 | 5
23 | 6
24 | 7
25 | 8
26 | 9
27 | 10
28 | 11
29 | 12
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/public/photo-grid.css:
--------------------------------------------------------------------------------
1 | .photo-grid {
2 | display: grid;
3 | gap: 1rem;
4 |
5 | grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
6 | grid-auto-rows: 240px;
7 | }
8 |
9 | /* Medium screens */
10 | @media screen and (min-width: 600px) {
11 | .card-tall {
12 | grid-row: span 2 / auto;
13 | }
14 |
15 | .card-wide {
16 | grid-column: span 2 / auto;
17 | }
18 | }
--------------------------------------------------------------------------------
/public/photo-grid.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Photo Grid
7 |
8 |
12 |
13 |
14 | Photo Gallery Grid
15 |
16 |
17 |
21 | 1
22 |
23 |
27 | 2
28 |
29 |
33 | 3
34 |
35 |
39 | 4
40 |
41 |
45 | 5
46 |
47 |
51 | 6
52 |
53 |
57 | 7
58 |
59 |
63 | 8
64 |
65 |
69 | 9
70 |
71 |
75 | 10
76 |
77 |
81 | 11
82 |
83 |
87 | 12
88 |
89 |