Forget BootStrap, Flexbox, or God forbid, using tables to make a page layout, revolution is here!
Learn all important things about CSS Grid in this 30 minutes long, easy to follow, YouTube video by Traversy Media.

Content:

  • Difference btn flexbox and grid 1:00
  • Simple layout example with main layout and side bar 2:50
  • Make odd divs have alternative background color 4:11
  • Define grid column widths (using percent) 5:10
  • Grid gaps 7:04
  • Define grid column widths (using fractions) 9:32
  • Shorthand method for declaring fractions 10:46
  • Declare div heights (all with same height) 12:00
  • (IMPORTANT!!!) Avoid content overflow with grid-auto-rows minmax 13:00
  • Nested grids 14:00
  • Set div heights within nested grid 15:25
  • Align divs to left with justify-items: start 19:16
  • Other horizontal align options 19:38
  • Align divs vertically 20:00
  • Align one div using align-self 20:58
  • Grid lines intro 22:01
  • Stretch div across 2 columns example 22:50
  • Stretch div across 2 rows example 23:25
  • Switching order of divs 24:47
  • Overlapping divs 25:20

Rest of the article is coming soon…

Categories: Tutorials

1 Comment

test · December 27, 2019 at 9:42 pm

test

Leave a Reply

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