<!DOCTYPE html>
<html>
<head>
<style>
t-cluster {
display: flex;
flex-wrap: wrap;
gap: var(--t-cluster-gap);
justify-content: flex-start;
align-items: center;
}
</style>
<style>
t-cover {
display: flex;
flex-direction: column;
padding: 1rem;
min-block-size: var(--t-cover-percent);
}
t-cover>.t-cover-main {
margin-block: auto;
}
t-cover>.t-cover-header {
margin-block-end: 1rem;
}
t-cover>.t-cover-footer {
margin-block-start: 1rem;
}
</style>
<style>
t-padded {
display: block;
padding: var(--t-padded-padding);
}
</style>
<style>
t-switcher {
display: flex;
flex-wrap: wrap;
gap: var(--t-switcher-gap);
}
t-switcher > * {
flex-grow: 1;
flex-basis: calc((var(--t-switcher-threshold) - 100%) * 999);
}
</style>
<style>
t-stack {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
t-stack>* {
margin-block: 0;
}
t-stack>*+* {
margin-block-start: var(--t-stack-space);
}
t-stack:only-child {
block-size: 100%;
}
t-stack> :nth-child(3) {
margin-block-end: auto;
}
</style>
<style>
t-frame {
aspect-ratio: var(--t-frame-ratio);
display: flex;
overflow: hidden;
justify-content: center;
align-items: center;
}
t-frame>img,
t-frame>video {
object-fit: cover;
inline-size: 100%;
block-size: 100%;
}
</style>
<style>
t-center {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<style>
.stub { width: 50px; height: 50px; background-color: black }
</style>
<style>
t-fluid-grid {
display: grid;
grid-gap: var(--t-fluid-grid-gap);
grid-template-columns: repeat(auto-fit, minmax(min(var(--t-fluid-grid-min-width), 100%), 1fr));
}
</style>
<title>
Every Layout
</title>
</head>
<body>
<h1>
Stack
</h1>
<t-stack style="--t-stack-space: 2.4679687500000003rem;">
<t-padded style="--t-padded-padding: 0.48750000000000004rem;">
<t-stack style="--t-stack-space: 0.48750000000000004rem;">
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
</t-stack>
</t-padded>
<t-padded style="--t-padded-padding: 0.48750000000000004rem;">
<t-stack style="--t-stack-space: 1.6453125rem;">
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
</t-stack>
</t-padded>
<t-padded style="--t-padded-padding: 0.48750000000000004rem;">
<t-stack style="--t-stack-space: 3.701953125rem;">
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
</t-stack>
</t-padded>
</t-stack>
<h1>
Center
</h1>
<t-center>
<div class="stub">
</div>
</t-center>
<h1>
Cluster
</h1>
<t-cluster style="--t-cluster-gap: 2.4679687500000003rem;">
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
</t-cluster>
<h1>
Switcher
</h1>
<t-switcher style="--t-switcher-gap: 1.6453125rem;--t-switcher-threshold: 60ch;">
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
</t-switcher>
<h1>
Cover
</h1>
<t-cover style="--t-cover-percent: 50vh;">
<div class="stub t-cover-main">
</div>
</t-cover>
<t-cover style="--t-cover-percent: 100vh;">
<div class="stub t-cover-header">
</div>
<div class="stub t-cover-main">
</div>
</t-cover>
<t-cover style="--t-cover-percent: 100vh;">
<div class="stub t-cover-header">
</div>
<div class="stub t-cover-main">
</div>
<div class="stub t-cover-footer">
</div>
</t-cover>
<h1>
Fluid Grid
</h1>
<t-fluid-grid style="--t-fluid-grid-gap: 0.48750000000000004rem;--t-fluid-grid-min-width: 10ch;">
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
<div class="stub">
</div>
</t-fluid-grid>
<h1>
Frame
</h1>
<t-frame style="width: 400px;--t-frame-ratio: 3/4;">
<img src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg">
</t-frame>
<h1>
Manual SVG
</h1>
<svg height="32" viewBox="0 0 32 32" width="32">
<path d="M2 6v24h28V6Zm0 9h28M7 3v6m6-6v6m6-6v6m6-6v6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
</body>
</html>