CSS Grid Simplified

• CSS Grid simplified course by Shruti Balasa
• Based of the original source code

Table of Contents

• 01 First look at CSS Grid grid-template-columns (view 10 Responsive Grids Without Media Queries)
• 02 Sizing cells grid-template-columns: 1fr 2fr
  • 02b Fast food menu Fast food menu: grid-template-columns: 1fr auto
• 03 Creating Rows Page layout grid: grid-template-rows: auto 1fr auto
  • 03b Full page menu grid-template: repeat(2, 1fr) / repeat(3, 1fr) (view 11b Full page menu)
• 04 Spacing between cells Fast food menu: column-gap: 2rem -> row-gap: 2rem -> gap: 2rem 2rem -> gap: 2rem;
  • 04b Shopping cart summary Shopping Cart Summary justify-content, align-content -> shorthand place-content: align-content justify-content
• 05 Horizontal and Vertical Spacing Team profiles:
  • justify-content vs justify-items
  • shorthand place-items: align-items justify-items
  • align-items
  • 05b Center div place-items: center center = place-items: center
• 06 Single Cell Alignment Restaurant ratings: align-self, justify-self
  • 06b Profile card:
    • Shorthand place-content: align-content justify-content
    • CSS properties that could be used on individual items of a grid: align-self and justify-self
• 07 Merge and Swap Cells Contact form:
  • grid-column-start: 2 == grid-column: 2;
  • grid-row-start: 1; grid-row-end: 3 == grid-row: 1 / 3;
  • grid-area: 1 / 2 / 3;
  • grid-column: span 2;
• 08 Named Grid Areas Contact form: grid-area, grid-template-areas
  • 08b Image caption Image caption: grid-area, grid-template-areas. Image has grid area named "fig" and figcaption also "fig" because we want both of them to occupy the same grid area
• 09 Advanced Sizing Values max-content, min-content, fit-content
  • 09b Pricing plans minmax
• 10 Responsive Grids Without Media Queries auto-fit, minmax, auto-fill
  • 10b Statistic section auto-fit, minmax, auto-fill
• 11 Auto Flow and Sizing Implicit Grids grid-auto-flow, grid-auto-columns
  • 11b Full page menu grid-auto-rows
• 12 Episodes 1-11 Review