The CSS grid layout is a two-dimensional grid based layout system that aims to solve a lot of the layout problems developers have been hacking their way around for years. It is two-dimensional, which means in the grid itself we can handle both the columns and the rows.

When we set the parent container to Grid or inline grid, that becomes the grid container. The direct children of the grid container are called grid items. The horizontal lines that divide the grid and separate the columns and rows are called grid lines.

We can define the rows and columns of a grid using the grid template columns and grid template rows properties. These properties allow us to specify the size of the rows and columns, and we can use different units such as pixels, percentages, and fractions.

The FR unit is a unit that allows us to create flexible grids. It stands for fraction unit, and it automatically calculates the layout divisions while adjusting for gaps inside the grid.

We can mix FR units with other units, such as pixels and percentages, to create more complex grids. However, we cannot mix FR units with pixels, but we can mix percentages and fractions.

The repeat function is a shorthand way to create columns or rows in a grid layout. It allows you to define a pattern for part of your grid and then repeat it. The syntax is 'repeat' followed by the number of times you want to repeat the pattern, and then the size of each column or row.

The minmax function is used to define a range between a minimum size and a maximum size for grid columns or rows. It ensures that the elements remain responsive but don't get too small or too large. The syntax is 'minmax' followed by the minimum size and then the maximum size.

The explicit grid is defined by the developer, while the implicit grid is automatically generated by the browser to accommodate extra grid items. The explicit grid is defined using grid template columns and grid template rows.

Grid autoflow is a shorthand property that controls how grid items are automatically placed when there are unassigned spaces in the grid or when items overflow the explicit grid. It can be set to 'row' or 'column' to determine the direction of the autoflow.

Grid autoflow is a property that allows us to change how the grid items are placed in the grid. By default, grid items are placed row by row, but we can change this to place them column by column. We can also use the justify-content and align-content properties to control the alignment of the grid items.

Grid alignment properties are used to control the alignment of grid items within their cells. There are four main alignment properties: justify-content, align-content, justify-items, and align-items. These properties can be used to align items horizontally and vertically, and can also be used to distribute space between items.

Grid lines are used to define the structure of the grid, and can be used to place items in specific positions. We can also use shorthand properties to simplify our code and make it more efficient. The grid-row and grid-column properties can be used to place items in specific positions, and can also be used to span items across multiple rows and columns.

so what I can do instead of typing all of these out I get to grid area um so we two two right four oops four and that's essentially the exact same thing as this one

the really cool thing about grid is this thing called grid template areas and the grid template Area Property it allows you to assign names to different section of a grid layout and you could use it to organize and Visually structure your design

we do have the Gap property that's very similar to um the flex Gap so um again you have the row Gap the column Gap or just the Gap property itself which is the row and the column

it's very similar to flexbox when you justify yourself you're telling um the property itself instead of the entire everything um aligning a certain way you're telling a certain um certain grid it how to align uh specifically the horizontal alignment in the item

so we have this index and it's very uh simple so we have our section and we have our body and in the body there's one section and this is our container

so let me show you before and after so if I inspect here right now I only have one grid and this is on the main there's no grid on this at this moment so if I take the figure and I do display grid you see suddenly and you know I could so I have two figures so let me uh uncheck the name so you can see what's going on here so suddenly these have now become grids as well

I'm just going to do justify content Center so when I do justify content Center um suddenly this this um is only as big as um everything is as big as the largest size item which is the 300 um and that kind of it fixed the issue that we had overflowing with these being bigger than the image

and then let's do grid template rows uh I'm going to do auto so we want to set two of them um one so we're going to just set the grid template rows for now um so what I want to do here is I want this um big caption to um overlay this um this image right so I want to Overlay it on top

so I have here F cap we're going to use the Align self so we're going to tell align self because we have we can't use align items because there's two things in the same cell um so we're telling the fit caption to align self and align self remember it's the vertical alignment versus if we do justify self it's the horizontal and we want it to be at the end

I wanted to show you guys what the Gap does so if I add a gap inside this Main it added some space in between each of these section here so um you can see here if if you know if these were boxes that were smaller and you wanted to add some space in between the boxes you can add a little Gap there

so it's a lot of uh different properties um that you could use to um you know just position things and just a lot easier that you know stuff that you use float or you use like negative margins or things like that it's uh it can get to be a lot of cod versus it's a lot simpler this way to be able to adjust um different spacing and how to get these uh grid items to show the way that you want it to show