CSS Grid CSS code

body{margin:30px;
font-family:"Poppins";
}
.grid-container{
    background:#eee;
    /*Below is the max pixels in width */
    max-width: 900px;
    margin:0auto;
    display:grid;
    /*creates a gap of 50 pixels */
    gap:30px 100px;
    /* Below specifies that each column for each row is 300 px each*/
    /*repeat(6,1fr) 6 is the argument for how many blocks you want in the grid*/
    /* 1fr stands for 1 fraction of the avaliable space max being 900px. It divides the grid container into equal fractions. */
    grid-template-columns:repeat(6,1fr);
}


/*Below is a CSS selector that is targeting all the <div> elements that are direct children with the class .grid-container*/
/*'.grid-container' is targeting elements with the same name grid-container. In the index.html file <div class="grid-container"
 is the thing that has grid-container >*/
 /*> is the child combinator selector in CSS, this selects on the the direct children of the specified element.*/
 /*div is the element selector, specifiying that the code is targeting <div> elements.*/


.grid-container > div{
    background:#CCC;
    text-align:center;
    padding:20px;
    border: 1px solid black;
}
/*div:nth-child is a pseudo child selector that tells the code to look at the specific child and then modify it */
/*in this case this is targeting the first child of grid container. */
.grid-container > div:nth-child(1){
    grid-column: 1/ span 2;
    /*1/span2 this is telling the computer starting at column 1 the
    the selected child is going to have a span of 2 columns*/
}
.grid-container > div:nth-child(2){
    grid-column: 2/ span 2; /*This is selecting the second child, starting it at column 2 and giving it the span of 2 columns*/
}