.griditem {

    border: 2px solid black;
    background-color: aquamarine;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
}

.gridcontainer {
    width: 100%;
    background-color: rgb(201, 199, 197);
    /* Make our gridcontainer fill up the entire vertical space available to it */
    height: 100vh;

    /* Make our gridcontainer a CSS grid! */
    /* display: grid; */

    /* Well, that wasn't very exciting, was it?  Let's add a gap of 5 pixels*/

    /* gap: 5px; */

    /* Let's make our grid have 3 columns, each 200px wide!  Try changing the width of the viewport to see what happens.  Notice that the columns don't grow or shrink  */

    /* grid-template-columns: 200px 200px 200px; */

    /* fr is a new unit that we use with css grid - it means a fraction of available space */
    /* Let's change our grid so that it still has three columns, but make the columns use up all available width  */

    /* grid-template-columns: 1fr 1fr 1fr; */

    /* Now let's make the first column take 2 times more space than the other 2 */

    /* grid-template-columns: 2fr 1fr 1fr; */

    /* And now, the first column is always 200px and the other two grow and shrink together */

    /* grid-template-columns: 200px 1fr 1fr; */

    /* Next, make the first column grow and shrink as well but never shrink less than 200px - Hint!  Think minmax!*/

    /* grid-template-columns: minmax(200px,1fr) 1fr 1fr ; */

    /* Let's change tack and make each column 300px but, when we run out of room, make the griditem wrap to the next line - Hint, don't use wrap, think auto-fit */

    /* grid-template-columns: repeat(auto-fit, 300px); */


    /* Now, let's focus on the formatting each row in our grid  Let's make the first rown 200px high, the second row 100, and the third 50 - What happens to rows after the third?*/

    /* grid-template-rows: 200px 100px 50px; */

    /* Now, we want the columns to be 200px and our rows to take up all available height */

    /* grid-template-columns: repeat(auto-fit,200px); */
    /* grid-auto-rows: 1fr;  */


    /* Finally, what if we just want to make every griditem 200px by 200px and wrap to the next line when needed?  Hint think grid-template rows as auto*/

    /* grid-template-rows: auto; */
    /* grid-template-columns: repeat(auto-fit, 200px); */
    /* grid-auto-rows: 200px; */

}