CSS Grid
CSS Grid is the best way to organize content on a, guess what, grid.

CSS offers two ways to create layouts: Grid and Flexbox.

Grid works on 2 dimensions (rows AND columns). Flexbox works on a single dimension (rows OR columns).

They make it easy to create responsive and flexible layouts.

Each of them has its place, and we’re going to look at the basics of both.

The CSS Grid layout is activated on a container element (which can be a div or any other tag) by setting the display property to grid.

After this, you can define some properties on the container, and some properties on each individual item in the grid.

These properties combined will determine the final look of the grid.

Lessons in this unit:

0: ▶︎ Introduction
1: grid-template-columns and grid-template-rows
2: Setting columns and rows dimensions
3: Gap between the cells
4: Span items on multiple columns and/or rows
5: Minimum row width
6: Layout using grid-template-areas
7: DEMO Example: simple grid layout
8: DEMO Example: grid layout with header, sidebar, content and footer
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!