Web component to simplify responsive content area layout using CSS Grid.
Container query behavior provided by wc-responsive-container.
npm i wc-responsive-grid<style>
:root {
--wc-responsive-grid-gap: 2rem;
}
article {
width: 85%;
margin: 50px auto;
}
section {
background-color: lightgray;
outline: 3px dotted tomato;
padding: var(--wc-responsive-grid-gap);
}
wc-responsive-grid {
padding: var(--wc-responsive-grid-gap);
outline: 3px dotted skyblue;
}
wc-responsive-grid.lg > section {
min-height: 200px;
}
</style>
<script type="module">
// Using @web/dev-server or your favorite bundler...
import 'wc-responsive-grid';
</script>
<body>
<article>
<wc-responsive-grid lg-tmpl="r2 c2" breaks='{"sm": 300, "md": 500, "lg": 700, "xl": 900}'>
<section lg-span="r2 c1">
1
</section>
<section lg-span="r2 c1">
2
</section>
</wc-responsive-grid>
</article>
<article>
<wc-responsive-grid lg-tmpl="r2 c2" breaks='{"sm": 300, "md": 500, "lg": 700, "xl": 900}'>
<section lg-span="r1 c1">
1
</section>
<section lg-span="r1 c1">
2
</section>
<section lg-span="r1 c1">
3
</section>
<section lg-span="r1 c1">
4
</section>
</wc-responsive-grid>
</article>
<article>
<wc-responsive-grid lg-tmpl="r2 c3" breaks='{"sm": 300, "md": 500, "lg": 700, "xl": 900}'>
<section lg-span="r1 c1">
1
</section>
<section lg-span="r2 c2">
2
</section>
<section lg-span="r1 c1">
3
</section>
</wc-responsive-grid>
</article>
<article>
<wc-responsive-grid lg-tmpl="r2 c3" breaks='{"sm": 300, "md": 500, "lg": 700, "xl": 900}'>
<section lg-span="r1 c1">
1
</section>
<section lg-span="r1 c2">
2
</section>
<section lg-span="r1 c2">
3
</section>
<section lg-span="r1 c1">
4
</section>
</wc-responsive-grid>
</article>
<article>
<wc-responsive-grid xl-tmpl="r2 c3" breaks='{"sm": 300, "md": 500, "lg": 700, "xl": 900}'>
<section xl-span="r1 c1">
1
</section>
<section xl-span="r1 c1">
2
</section>
<section xl-span="r2 c1">
3
</section>
<section xl-span="r1 c2">
4
</section>
</wc-responsive-grid>
</article>
</body>git clone git@github.com:pinkhominid/wc-responsive-grid.git
cd wc-responsive-grid
npm i
npm start