Skip to content

Commit 20161c5

Browse files
solygambassolygambas
committed
feat: add container queries
1 parent f8575cd commit 20161c5

File tree

3 files changed

+204
-0
lines changed

3 files changed

+204
-0
lines changed

‎102-container queries/index.html

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!-- Based on Learn how to use Media queries & Container queries by Kevin Powell (2024)
2+
see: https://www.youtube.com/watch?v=2rlWBZ17Wes -->
3+
<!DOCTYPE html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link rel="stylesheet" href="style.css" />
9+
<title>Container Queries</title>
10+
</head>
11+
<body>
12+
<div class="wrapper">
13+
<main>
14+
<section class="primary-content" style="--theme: dark">
15+
<h1>Media queries and container queries</h1>
16+
<p>
17+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
18+
Exercitationem neque tenetur numquam officiis officia, eos eligendi
19+
animi architecto aliquam dignissimos, at minus, aperiam expedita.
20+
Officia ad nostrum harum deleniti quasi!
21+
</p>
22+
<p>
23+
Consectetur sunt, in sit iure dolor ratione odit necessitatibus
24+
velit animi tempore, tenetur alias accusantium impedit ad vitae,
25+
quis totam! Minus provident exercitationem sapiente ut ex repellat
26+
vel odio doloremque?
27+
</p>
28+
<article class="card">
29+
<h2>Card in .primary-content</h2>
30+
<img
31+
src="https://images.unsplash.com/photo-1702927706292-c57d75cf2143?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDMyMzR8&ixlib=rb-4.0.3&q=80&w=400"
32+
alt=""
33+
/>
34+
<p>
35+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore
36+
reiciendis non eaque consectetur. Unde, delectus!
37+
</p>
38+
</article>
39+
</section>
40+
41+
<section class="cards">
42+
<article class="card">
43+
<h2>Card 1</h2>
44+
<img
45+
src="https://images.unsplash.com/photo-1704137477371-bed38523c2eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
46+
alt=""
47+
/>
48+
<p>
49+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore
50+
reiciendis non eaque consectetur. Unde, delectus!
51+
</p>
52+
</article>
53+
<article class="card">
54+
<h2>Card 2</h2>
55+
<img
56+
src="https://images.unsplash.com/photo-1703783010857-9bd7a7b97c50?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
57+
alt=""
58+
/>
59+
<p>
60+
Molestias similique quasi expedita doloribus odit consectetur
61+
harum placeat qui! Alias commodi soluta possimus veritatis.
62+
</p>
63+
</article>
64+
<article class="card">
65+
<h2>Card 3</h2>
66+
<img
67+
src="https://images.unsplash.com/photo-1704137477371-bed38523c2eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
68+
alt=""
69+
/>
70+
<p>
71+
Cupiditate voluptate, provident cum aut tempore, voluptatem,
72+
repellendus nisi ratione ex laudantium nulla! Repellat, nemo?
73+
</p>
74+
</article>
75+
</section>
76+
</main>
77+
</div>
78+
</body>
79+
</html>

‎102-container queries/style.css

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
:root {
8+
--bg-color: rebeccapurple;
9+
}
10+
11+
/* https://caniuse.com/css-media-range-syntax */
12+
@media screen and (width >= 600px) {
13+
:root {
14+
--bg-color: orangered;
15+
}
16+
}
17+
18+
body {
19+
font-family: "Roboto", sans-serif;
20+
margin: 0;
21+
padding-block: 2rem;
22+
/* background-color: rebeccapurple; */
23+
background-color: var(--bg-color);
24+
}
25+
26+
/* @media screen and (min-width: 600px) {
27+
body {
28+
background-color: orangered;
29+
}
30+
} */
31+
32+
/* https://caniuse.com/css-container-queries-style */
33+
@container style(--theme: dark) {
34+
.card {
35+
background: black;
36+
color: white;
37+
}
38+
39+
.card > * {
40+
color: white;
41+
}
42+
}
43+
44+
.primary-content,
45+
.cards {
46+
container-type: inline-size;
47+
}
48+
49+
main {
50+
display: grid;
51+
gap: 1rem;
52+
}
53+
54+
@media (min-width: 760px) {
55+
main {
56+
grid-template-columns: 1fr 300px;
57+
}
58+
}
59+
60+
.cards {
61+
/* container-type: inline-size;
62+
container-name: card-grid; */
63+
container: card-grid / inline-size;
64+
}
65+
66+
.card {
67+
display: grid;
68+
gap: 1rem;
69+
}
70+
71+
.card h2 {
72+
font-size: clamp(1.5rem, 10cqi, 3rem);
73+
/* cqi = 10% of a query container's inline size */
74+
/* cqb is based on the block size */
75+
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries */
76+
/* https://caniuse.com/css-container-queries */
77+
}
78+
79+
@container card-grid (min-width: 45ch) {
80+
.card {
81+
/* background: yellow; */
82+
grid-template-columns: auto minmax(25ch, 1fr);
83+
}
84+
85+
.card h2 {
86+
grid-column: 1 / -1;
87+
}
88+
}
89+
90+
@layer demo {
91+
h1,
92+
p {
93+
color: white;
94+
}
95+
96+
img {
97+
max-width: 100%;
98+
border-radius: 0.25rem;
99+
}
100+
101+
.wrapper {
102+
width: min(100% - 3rem, 1200px);
103+
margin-inline: auto;
104+
}
105+
106+
.cards {
107+
display: grid;
108+
gap: 1.5rem;
109+
height: 100vh;
110+
align-content: start;
111+
}
112+
113+
.card {
114+
background-color: #fff;
115+
border-radius: 4px;
116+
box-shadow: 0 15px 15px rgb(0 0 0 / 0.25);
117+
padding: 0.75rem;
118+
}
119+
120+
.card > * {
121+
margin: 0;
122+
color: #000;
123+
}
124+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
| 099 | [Parallax Website](099-parallax%20website) | [Live Demo](https://codepen.io/solygambas/full/poeBdPr) |
108108
| 100 | [Hulu Webpage Clone](100-hulu%20webpage%20clone) | [Live Demo](https://codepen.io/solygambas/full/rNmmqBy) |
109109
| 101 | [Cascade Layers](101-cascade%20layers) | [Live Demo](https://codepen.io/solygambas/full/poYaZmv) |
110+
| 102 | [Container queries](102-container%20queries) | [Live Demo](https://codepen.io/solygambas/full/abMqPNy) |
110111

111112
This repository is mostly based on 2 courses by Brad Traversy (2020):
112113

0 commit comments

Comments
 (0)