Mastering CSS Grid 2023 - With 3 cool projects

In this video I talk about the best way to rate and review this course.

In this video we look at what CSS Grid is and how it is beneficial for layouts. We also cover some terminology and browser support.

In this video, you will learn how to create your very first Grid Container. We will look at both types of Grid Containers as well.

In this video you will learn how to specify the number of rows and columns for your grid, and their respective sizes.

In this video we take a first look at the grid property and how we can use it to define our rows and columns.

In this video we look at how we can size our row and column tracks using pixels and percentages.

In this video we look at how we can size our row and column tracks using em and rem units.

In this video we look at how we can size our row and column tracks using vw, vh, vmax and vmin units.

In this video we will cover the special auto value that we can use for the size of our row and column tracks.

In this video we will cover the new fraction (fr) unit and how we can use it to allocate remaining space to grid items.

In this video we quickly cover the similarities and differences between using the auto value vs using fractions when sizing our grid tracks.

In this video we will cover how we can set a minimum and a maximum size of a grid track using the new minmax function.

In this video I quickly cover some of the gotchas that I found when using the minmax function.

In this video I quickly cover what the special min-content and max-content values do when using them for sizing our grid tracks.

In this video I cover the new fit-content function, which gives us the ability to set a max limit of a column tracks regardless of how much text exists in each grid item for that column.

In this video we look at the new repeat function, what a track list is, and how we can use both of these concepts together to simplify of row and column definitions.

In this video we look at Grid Gaps, and how we can set up different gap sizes between both column and row tracks.

I quickly explain the changes to grid-column-gap, grid-row-gap and grid-gap.

In this video I quickly show you how you can nest a grid container inside of a grid item of another grid container.

Just a quick note on nesting and how grid items can also be grid containers.

In this video we take a look at the first way we can move grid items around in our grid container. We can order them using the order property.

In this video we look at how we can explicit set which column track a specific grid item could be placed inside of a grid container.

In this video we look at how we can explicit set which row track a specific grid item could be placed inside of a grid container.

In this video we look at how we can explicit set exactly which grid cell a grid item could be placed, inside of a grid container..

In this video we look at how we can make grid items span over multiple column tracks, row tracks, or both.

In this video we look at the special span keyword, and how we can use it simplify the spanning of grid items inside a grid container.

In this video, we quickly cover the gotchas that I noticed when spanning grid items inside of a grid container.

In this video we cover how to name grid lines and how to use these line names to place our grid items.

In this video we cover how to use line names to assist with spanning grid items.

In this video we cover how to give multiple line names to the same grid line.

In this video we cover how we can use line names in conjunction with the repeat function.

In this video we look at the grid-column property, and how we can use it to simplify both positioning and spanning grid items along column tracks.

In this video we look at the grid-row property, and how we can use it to simplify both positioning and spanning grid items along row tracks.

In this video we look at the grid-area property, and how we use it to place grid items into specific cells in the grid.

In this video we look at how the grid-area is used to span grid items over both column and row tracks.

In this video, we update our knowledge on the grid property, by learning how to specify line names when using it.

In this video we cover how to change the alignment / distribution, of all our row tracks in our grid container.

In this video we cover how to change the alignment / distribution, of all our column tracks in our grid container.

In this video we look at the place-content property, and how we can use it to control the alignment / distribution of both row and column tracks.

In this video we look at how to vertically align the content inside of all our grid items of a grid container.

In this video we look at how to horizontally align the content inside of all our grid items of a grid container.

In this video we look at the place-items property, and how we can use it to control the alignment of content inside of all our grid items of a grid container from both a vertical and horizontal direction.

In this video we look at how to vertically align the content inside of an individual grid item.

In this video we look at how to horizontally align the content inside of an individual grid item.

In this video we look at how to both vertically and horizontally align the content inside of an individual grid item.

In this video we quickly review media queries. A concept needed to understand responsive web design. This is needed so we can properly configure CSS Grid over different device sizes.

In this video, we quickly cover how we can prepare our HTML files so that on mobile it will display appropriately.

In this video, we learn how to position grid items using the concept of areas. Areas are used to simplify the positioning of items over different device sizes.

In this video, we now cover how to span grid items using areas.

In this video we cover how to mask a specific grid cell in our grid container as empty using areas.

In this video we cover some of the gotchas that you have to look out for when using grid-template-areas property.

In this video we learn another clever way of making a responsive grid, by just using the repeat function.

In this video we once again review the grid property, taking the concepts covered in this section and applying it to this property.

In this video we get a clearer understand of the difference between what is deemed an explicit grid, and what is implicit.

In this video I quick introduce the Autoplacement Algorithm and define all the criteria that makes it up.

In this video I quickly cover what Flow means in regards to the Autoplacement algorithm and the options you have available.

In this video we show you how to change the flow of items inside of your grid container using the grid-auto-flow property. We then talk a little more about how items flow inside of the container and also how to size implicit column tracks.

In this video we go over the algorithm used to determine the order to which grid items are placed inside our grid containers.

In this video we talk about the concept of locking and how it affects how grid items are placed within our grid containers.

In this video we extend our knowledge from the previous video and look at locking from a practical level.

In this video I explain how the grid-template-areas and grid-area properties can be visualised to our locking examples but using line names instead of numbers.

In this video I go through some practical examples of how locking works when using the grid-template-areas and grid-area properties.

In this video I explain Grid Spans and how it affects the placement of grid items

In this video we look at some practical examples of how grid spanning works.

In this video I quickly explain what sparse and dense packing is and how it affects how items are placed inside a grid container.

In this video we look at how to change the packing using the grid-auto-flow property.

In this video we put all the knowledge over the last few videos to get a better understanding of the Autoplacement Algorithm

In this video we continue looking at examples to better understand the Autoplacement Algorithm

In this video we take all the learning we have gathered in this section and apply them to the grid property.

In this video we look at a few gotchas that you might run into when setting certain Autoplacement values on the grid property.

In this video I quickly show you the grid-template property and why you should not use it anymore.

In this video we compare how absolute positioning works in a grid container vs a regular block level element.

In this video, I give you a current snapshot of the animations that are supported with CSS Grid.

In this video we take a look at some layouts that are built using Flexbox and convert them to use CSS Grid instead.

In this video we continue on from the last video, looking at some more layouts that are built using Flexbox, and converting them to grids.

In this video I show you when it's the right situation to use Flexbox over CSS Grid.

Just a quick note grid items and how they can be sized.

In this video we look at the box model properties of an individual grid item and see how changing them affects itself and its parent container.

In this video I show you a couple of ways of setting up a 4 column layout using CSS Grid.

In this video we cover the simple problem of building a layout that contains a simple sidebar on the left, followed with the main content on the right.

In this video we look at a couple of ways of controlling the vertical alignment of text using CSS Grid.

In this video we look at how we can create a modal dialog and center it into the middle of the screen using CSS Grid.

In this video we look at how we can implement a sticky footer easily using CSS Grid.

In this video we look at how to format a typical form, and align both labels and their associated controls.

In this video we look at how to build out a common layout, known as the Holygrail layout.

In this video we look at how to build a comment layout used on social media sites. The Media Objects layout.

In this video we look at how to build a nice viewport friendly movie gallery using CSS grid and the viewport units.

In this video we look at once again how to build a viewport friendly movie gallery, but this time using the auto-fit keyword.

In this video we look at how to animate a sidebar / drawer that is set up using CSS Grid.