- 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
- 06b Profile card:
- 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
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|