wc-responsive-grid

Web component to simplify responsive content area layout using CSS Grid.

Container query behavior provided by wc-responsive-container.

Install

npm i wc-responsive-grid

Example

<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>

Run Example

git clone git@github.com:pinkhominid/wc-responsive-grid.git
cd wc-responsive-grid
npm i
npm start

wc-responsive-grid
Release 3.1.1

Release 3.1.1

3.1.1

3.1.0

3.0.0

2.2.2

2.2.1

2.2.0

2.1.2

2.1.1

2.1.0

2.0.2

Documentation

wc-responsive-grid

Install

Example

Run Example

Stats

Development practices

Releases

Contributors

wc-responsive-grid Release 3.1.1

Release 3.1.1 Toggle Dropdown 3.1.1 3.1.0 3.0.0 2.2.2 2.2.1 2.2.0 2.1.2 2.1.1 2.1.0 2.0.2

Documentation

wc-responsive-grid

Install

Example

Run Example

Stats

Development practices

Releases

Contributors

wc-responsive-grid
Release 3.1.1

Release 3.1.1

3.1.1

3.1.0

3.0.0

2.2.2

2.2.1

2.2.0

2.1.2

2.1.1

2.1.0

2.0.2