Skip to content

Instantly share code, notes, and snippets.

@Shurlow

Shurlow/01_layout.md

Last active October 2, 2018 04:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Shurlow/fd5d0c1c1e839779327581a7b83fa2cf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Shurlow/fd5d0c1c1e839779327581a7b83fa2cf to your computer and use it in GitHub Desktop.
Download ZIP
Layout Lesson Notes
Raw
01_layout.md

CSS Layout Notes

Objectives

  • Use display properties to create dynamic layouts
  • Use flebox properties to create dynamic layouts

The display property

Most commmon values include:

  • block
  • inline
  • inline-block
  • flex

Inline vs Block vs Inline-Block

Example

https://codepen.io/scotthurlow/pen/LBLRJo?editors=1100

Challenge

Edit the CSS in the example bellow to resemble the Github contributions blocks:

https://codepen.io/scotthurlow/pen/VBWKVZ?editors=1100

Bonus: Use nth-child selector to color odd blocks green.

Display Flex

Common properties:

  • display: flex on parent (wrapping) div
  • align-items
  • justify-content
  • flex-wrap
  • flex: <grow> <shrink> <basis>

Example:

https://codepen.io/scotthurlow/pen/gjRwJw?editors=1100

Challenge:

Edit the following template with flexbox to resemble the image bellow

https://codepen.io/scotthurlow/pen/qyjapg?editors=1100

Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment