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

Content:

  • Difference between flexbox and grid 1:00
  • Simple layout example with the main layout and sidebar 2:50
  • Make odd divs have an 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 min-max 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
  • Gridlines 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

CSS Grid brings the second dimension in making layouts. With a few CSS lines, you can create amazing responsive layouts. The easiest way to think of it is like working with HTML tables, except here, tables are made in CSS. Add different tables to media queries, and you can optimize your website for any device!

Code examples

Basic layout

See the Pen CSS Grid basics by Nemanya Ilincic (@professor_n00bSlayer) on CodePen.

Will be updated…

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 *