.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 */


    /* 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-columns: repeat(auto-fit, 200px);
    grid-auto-rows: 200px
}