Let's review the CSS Advanced chapter.

Grid:

Change the display of a container to grid as shown below:

.container { display: grid }

Grid rows & columns:

You can use the code below to define how many columns and rows with lengths you want.

.container {
grid-template-columns: 1fr 1fr 200px ; 
grid-template-rows: 1fr 50% 1 fr;
}

Repeat:

You can use the code below to repeat the number of columns or rows if they have a similar length.

.container { 
grid-template-columns: repeat(3, 1fr); 
}

Grid template areas:

You can use the code below to create a template with names in your container, then assign the names to each element.

.container {
grid-template-areas: 
   "header header header header"
   "main main . sidebar"
   "footer footer footer footer"; 
}

Then you can assign the name to each grid item.

.item-d { 
   grid-area: header;
 }

Box shadow:

You can use the code below to add shadows to elements on a webpage. The first value is the shadow x-axis, then the y-axis, then how much it should be blurred, and finally, the color.

.item{
   box-shadow: 10px 5px 5px red;
}

Selecting selectors:

To select an element inside an other element simply mention the selectors as show below.

HTML:

<footer>
        <h2>This is my footer.</h2>
        <p>This is just a simple text about the footer.</p>
</footer>

CSS:

footer h2 { color: red;}

And to target 2 or more elements at the same time you can use a "," between the selectors as shown in the code below.

footer h2, footer p { color: red;}

Filters:

To add filters you can use the filter property and then select the required filter from the lsit.

h2{ filter: grayscale(100%);}

Animation:

to add animation fist create the keyframs using the keyword "@keyframs", then add that animation to your element as shown in the example below.

@keyframes slide-up{
    0%{transform: translateY(40px); opacity: 0%;}
    100%{transform: translateY(0px); opacity: 100%;}
}

h2{ animation: slide-up 1s;}

Responsive:

To make a page responsive, you need to add styles for different screen width and for that you can use the code below.

@media (max-width:1150px){
    #intro h1{ font-size: 20px;}
}

That was all we needed to review for this chapter, CCS Advance.