Skip to content

Instantly share code, notes, and snippets.

@JanDW

JanDW/aspect-ratio-layout-2.html

Created November 10, 2023 02:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JanDW/11d60a5511e35a02a9854350426e7d80 to your computer and use it in GitHub Desktop.
Save JanDW/11d60a5511e35a02a9854350426e7d80 to your computer and use it in GitHub Desktop.
Download ZIP
Using parent CSS selector (:has()) to target the desired layout
Raw
aspect-ratio-layout-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Container Queries Javascript II</title>
<body>
<main>
<style>
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper {
max-width: 600px; /* constrain wrapper width */
display: grid;
grid-template-columns: repeat(var(--columns, 1), 1fr);
/* default to 1 column, but allow override */
gap: 1rem;
}
.wrapper:has(img.landscape) {
--columns: 2;
/* override default columns */
}
</style>
<!-- landscape -->
<div class="wrapper">
<img src="https://picsum.photos/400/270" alt="" class="landscape" width="400" height="270">
<!-- class landscape is used to target the image -->
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam culpa aliquid assumenda! Ea, rem inventore id cupiditate veritatis fugit ut nesciunt corporis, asperiores, similique hic! Sequi soluta labore dolorem ratione!</p>
</div>
<!-- portrait -->
<div class="wrapper">
<img src="https://picsum.photos/270/400" alt="" width="270" height="400">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam culpa aliquid assumenda! Ea, rem inventore id cupiditate veritatis fugit ut nesciunt corporis, asperiores, similique hic! Sequi soluta labore dolorem ratione!</p>
</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment