Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pinkhominid/wc-responsive-grid
Web component to simplify responsive content area layout using CSS Grid
https://github.com/pinkhominid/wc-responsive-grid
component container content css css-grid grid layout media queries query responsive wc web webcomponents
Last synced: about 1 month ago
JSON representation
Web component to simplify responsive content area layout using CSS Grid
- Host: GitHub
- URL: https://github.com/pinkhominid/wc-responsive-grid
- Owner: pinkhominid
- License: mit
- Created: 2020-05-29T02:49:58.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-02-21T05:38:53.000Z (11 months ago)
- Last Synced: 2024-11-22T21:02:05.885Z (about 1 month ago)
- Topics: component, container, content, css, css-grid, grid, layout, media, queries, query, responsive, wc, web, webcomponents
- Language: HTML
- Size: 306 KB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# wc-responsive-grid
Web component to simplify responsive content area layout using CSS Grid.
[Container query](https://wicg.github.io/container-queries/) behavior provided by [wc-responsive-container](https://www.npmjs.com/package/wc-responsive-container).
## Install
```js
npm i wc-responsive-grid
```
## Example
```html
: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;
}
// Using @web/dev-server or your favorite bundler...
import 'wc-responsive-grid';
1
2
1
2
3
4
1
2
3
1
2
3
4
1
2
3
4
```
## Run Example
```sh
git clone [email protected]:pinkhominid/wc-responsive-grid.git
cd wc-responsive-grid
npm i
npm start
```