CSS grid illustration from Codrops

Flexbox + Flex Grid: CSS Magic for Responsive Layouts

Since the WordCamp Sacramento crowd liked this, and since it would be even better if there were time to walk through some details of real-life examples, I want to present this to the Meetup in 2017.

Animated gif demonstrating transition between row and column

Join me for a tour of real-life design problems solved with Flexbox:

  • Vertical centering
  • Equal-height columns
  • Placing items at the outside edges of their containers
  • Automatic spacing and sizing of items to fit into a row (no more percentages for widths or margins)
  • Changing the order of elements on smaller screens
  • Wrapping rows so the elements always fill the width of the content area
  • New tricks with margin:auto

Watch the video of the WCSAC presentation on WordPress.tv

Introduction to CSS Grid

CSS grid illustration from Codrops

The new CSS Grid Specification is coming to browsers at the end of March. Although it won’t have widespread support for another year or two, it’s got amazing potential. It’s also more complicated than Flexbox, so I’d recommend starting to work with it now.

I’ll show you an example of the simplest implementation of the grid: auto-filling grid cells in the largest number of columns that fits in the content area. If I manage to make any other grids before that, I’ll show you those too, but if not, I will have a list of resources.

Details
Date:

April 16

Time:

01:00 pm - 03:30 pm

Website: https://www.meetup.com/Eastbay-WordPress-Meetup/events/236031233/
Organizer

The East Bay WordPress Meetup Group

Website: https://www.meetup.com/Eastbay-WordPress-Meetup/
Venue

Tech Liminal 3.0

344 Thomas L. Berkley Way

Oakland, CA, US

Leave a Reply

Your email address will not be published. Required fields are marked *