grid-box-flex-down

The demo project for a CSS Grid/Flexbox presentation, enjoy!

Click here to check out the slide deck.

Contents

There are two demonstrations in the project, one for Flexbox and another for grid. When viewing either, open up your browsers development tools to tinker with the CSS properties. To learn more about either check out the following resources:

Grid

• http://cssgridgarden.com/
• https://css-tricks.com/snippets/css/complete-guide-grid/
• http://gridbyexample.com/

Flex

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Setup for playing at home

1. Clone or download repo
2. Make sure to have Node.js and yarn (npm i -g yarn)
3. Run yarn in the project directory to install dependencies
4. Run yarn dev to launch local development server
5. Refer to grid.html or flex.html for each example, along with their corresponding stylesheets by the same names in the ./sass/ directory.
6. Enjoy!

Screenshots

Flexbox Demo

Grid Demo