Learn CSS Container Queries the new css feature that helps you style sidebars, aside and side navigations on different screen width.
What problem do container queries solve?
When creating a responsive design you often use a media query to change the document layout based on the size of the viewport.
However, many designs have common components that change layout depending on the available width of their container. This may not always relate to the size of the viewport, but instead relate to where in the layout the component is placed.
For example, the following component might be displayed in a narrow or wide column in the site layout. If there is space it displays as two columns, if not we want to display it stacked.
Code
<body>
<h1>My blog</h1>
<div class="container">
<main>
<article class="article">
<h2>Blog post 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi
consequuntur ratione fuga, dicta quo possimus nulla similique unde
eaque, neque aut, distinctio inventore ea! Architecto iusto
reprehenderit dignissimos voluptate consectetur deleniti nostrum
laudantium? In sed quaerat obcaecati, ipsa deserunt placeat iusto
eius, dolore distinctio doloribus vel. Magni voluptates quaerat esse
a quae porro nisi tempora ad inventore molestiae neque libero minima
sit numquam itaque deleniti similique eum quia, molestias fugiat
corrupti ullam veniam. Vel provident iusto, sed natus excepturi
earum! Excepturi, quisquam ipsa. Iure quam consequuntur libero sint
iusto iste aspernatur. Ad incidunt reprehenderit numquam! Minus
voluptatem iusto tempore laudantium modi accusantium saepe porro
repudiandae ullam animi qui aut facilis, eaque est non quasi
officiis asperiores reiciendis sed necessitatibus? Ullam nemo
corrupti nobis commodi, tenetur dolor, nulla odit inventore et in
eius reiciendis soluta adipisci natus. Aut sit praesentium ab.
Beatae commodi mollitia quaerat nemo voluptatem, reiciendis adipisci
nulla aliquid, tempore quas repellat suscipit alias facere atque
fugiat tenetur aperiam doloremque laborum dignissimos dolorum sint
sunt in illum quae! Nemo tempore ipsa temporibus ipsum magnam fugit
cum maxime eveniet aut, ut iure odio iusto dicta eaque quibusdam?
Totam officiis perferendis, ratione error harum rerum quasi fuga
culpa minima nisi temporibus hic! Minus beatae dolores pariatur
quis, maiores, ratione doloremque rerum vitae perferendis ipsum
saepe molestias qui unde aut? Tempore corporis alias aliquam
eligendi asperiores dolorem quia, eos soluta et, quaerat beatae
perferendis? Sapiente incidunt magni expedita nemo tempora
dignissimos, ipsum rerum, aliquid possimus cupiditate, quod nam? Quo
ipsa labore laudantium illo facere? Molestias quo error molestiae
ratione, atque esse quod incidunt possimus, voluptatibus eaque in
nesciunt quis? Saepe, iusto eveniet doloribus blanditiis ullam totam
laborum vitae quidem nostrum vero cum sit modi laudantium placeat
eligendi molestias, voluptatem esse dolorem aperiam veritatis,
quisquam ratione consequatur atque. Consequatur quaerat saepe ipsa
molestias harum quas dolorum id, corporis sequi vitae voluptatum
assumenda aspernatur a fuga natus doloremque, dolores omnis velit
deserunt quos! Dolorem distinctio cupiditate odit laudantium.
Tempore autem eligendi illo asperiores. Odit consequuntur iste id
voluptatem atque animi. Perspiciatis odio obcaecati recusandae
dicta, ullam corrupti repudiandae praesentium minima velit nostrum
eius laudantium quaerat a voluptas quisquam culpa ea vero minus
natus cumque error sed delectus atque ducimus. Non, obcaecati totam
vel ex libero, excepturi laudantium consequatur est illo asperiores
saepe ea debitis nemo ipsa laborum recusandae quas modi error
molestiae officiis perferendis accusantium culpa sint? Architecto
quaerat aliquam eius quae id ea tempore dolorum ipsam nulla enim
rerum nostrum doloribus optio nihil quos tenetur, eos, nemo iure
atque distinctio! Odio animi accusantium dolorum architecto
expedita, omnis vel eaque. Blanditiis maxime illo error dolorem
tenetur eveniet voluptatibus earum veniam voluptas hic, nobis
officia impedit. Nulla omnis eveniet tempora vel delectus illum
incidunt commodi, totam architecto quibusdam quas itaque ducimus,
beatae ipsam praesentium blanditiis maiores. Nisi animi cum beatae
saepe odit nihil neque nostrum quae, quos culpa consequuntur
consectetur, quas non a modi inventore sapiente veritatis?
Molestiae, nihil! Quo nostrum maiores, quidem dolor sunt omnis, esse
minus saepe quod ea qui? Ratione, sed harum!
</p>
</article>
<div class="card">
<img src="" alt="" />
<div class="card-body">
<h2>Heading of a nice article</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos,
modi.
</p>
<button class="btn">Send</button>
</div>
</div>
</main>
<aside class="sidebar">
<article>
<div class="card">
<img src="" alt="" />
<div class="card-body">
<h2>Heading of a nice article</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos,
modi.
</p>
<button class="btn">Send</button>
</div>
</div>
</article>
<article>
<div class="card">
<img src="" alt="" />
<div class="card-body">
<h2>Heading of a nice article</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos,
modi.
</p>
<button class="btn">Send</button>
</div>
</div>
</article>
</aside>
</div>
</body>* {
margin: 0;
padding: 0;
}
.container {
max-width: 1400px;
margin: auto;
padding: 0 1rem;
display: grid;
grid-template-columns: 2fr 1fr;
}
h1 {
margin: 3rem auto;
text-align: center;
}
h2 {
margin-bottom: 2rem;
}
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
main .card {
max-height: 300px;
flex-direction: column;
}
.card {
width: fit-content;
max-width: 500px;
display: flex;
color: darkviolet;
border: 1px solid darkviolet;
padding: 1.2rem;
margin: 1rem auto;
}
.card img {
width: 300px;
min-height: 150px;
background-color: darkviolet;
margin-bottom: 1.5rem;
}
.card .card-body {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.card .btn {
color: darkviolet;
border: 1px solid darkviolet;
border-radius: 5px;
cursor: pointer;
display: block;
padding: 0.3rem 0.75rem;
}
.sidebar {
border-left: 1px solid #333;
}
@media (max-width: 1200px) {
main {
grid-template-columns: 1fr;
}
main .card {
flex-direction: row;
}
}
/* @container*/
main,
.sidebar {
container-type: inline-size;
}
.sidebar .card .card-body {
margin-left: 1rem;
}
@container (max-width:400px) {
.sidebar .card {
background: #222;
color: #fff;
flex-direction: column;
margin: 1rem;
border-radius: 10px;
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.4);
}
.sidebar :nth-child(2) .card {
background: darkblue;
}
.sidebar .card .card-body {
margin-left: 0rem;
}
.sidebar .card .btn {
margin-top: 1rem;
background: green;
color: #fff;
font-weight: bold;
}
}