03-octocat-grid Brian Stickney

[BrianStick]

• [x] Create a new Issue with these tasks!
• [x] Use the git cli to initialize a new project
• [x] Checkpoint: Created and committed index.html and app.css boilerplate
• [x] Use the hub cli to create a repository called 03-octocat-grid
• [x] Use the git cli to create a branch called develop
• [x] In Github, open a PR from develop into master
• [x] Create the markup to represent the pictured site
  • [x] Checkpoint: Create markup to represent one grid item
  • [x] Markup: Image
  • [x] Markup: Number
  • [x] Markup: Octocat name
  • [x] Markup: Avatar(s)
  • [x] Checkpoint: Duplicate markup from the last step and group with a div
  • [x] Complete: Pushed index.html
• [x] Add styles for page
  • [x] Checkpoint: Create a "three up" grid
  • [x] Checkpoint: Size images to layout within grid
  • [x] Checkpoint: Style Number
  • [x] Checkpoint: Style Octocat Name
  • [x] Checkpoint: Style Avatar
  • [x] Checkpoint: Style Image Arrow
  • [x] Checkpoint: Cleanup Styles
  • [x] Complete: Pushed changes

[BrianStick]

https://github.com/BrianStick/03-Octocat-grid/pull/1

[rtablada]

@BrianStick getting there! Looks like you're using % to set the width of your columns, also use % so that your image fills up your column width.

To add spacing between your items and the border at the bottom, then you can use margin. Just watch out because you'll then have to use calc on your percent width to make up since (33%+10px+10px)*3 will be > 100% (look at use case #3 in this article: https://css-tricks.com/a-couple-of-use-cases-for-calc/)

[rtablada]

From there, you will want to do some float on .number and .name