https://github.com/itsjonq/hstack-vstack-css

CSS layout components that (basically) horizontally and vertically stack anything.
https://github.com/itsjonq/hstack-vstack-css

css flex flexbox flexbox-css horizontal hstack layouts stacking vertical vstack

Last synced: about 1 month ago
JSON representation

CSS layout components that (basically) horizontally and vertically stack anything.

Host: GitHub
URL: https://github.com/itsjonq/hstack-vstack-css
Owner: ItsJonQ
License: mit
Created: 2020-10-01T19:16:35.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2020-10-01T19:18:56.000Z (over 4 years ago)
Last Synced: 2025-03-24T09:38:33.871Z (about 2 months ago)
Topics: css, flex, flexbox, flexbox-css, horizontal, hstack, layouts, stacking, vertical, vstack
Language: CSS
Homepage:
Size: 85 KB
Stars: 43
Watchers: 0
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

README

# 🗄 HStack and VStack in CSS

> CSS layout components that (basically) horizontally and vertically stack anything.

## Usage

✌️ Check out the **[code here](https://github.com/ItsJonQ/hstack-vstack-css/blob/master/src/styles.css)**.

### Horizontally Stacking

The `.spacer` is used in the (below) example to push the items apart.

```html

🌭

🍕

🍟

```

### Vertically Stacking

```html

🌭

🍕

🍟

```

### Swapping from VStack to HStack (responsively)

The example below stacks items vertically on mobile. However, the items stack horizontally at the medium breakpoint for tablets.

```html

🌭

🍕

🍟

```