group_week06.css

/* ---------------------------------------------- */
/*                    Flex First                  */
/* ---------------------------------------------- */
#flex_first {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------- */
/*                   Flex Second                  */
/* ---------------------------------------------- */
#flex_second form ul {
    display: flex;
    flex-direction: column;
}

#flex_second form li {
    display: flex;
    flex-direction: column;
}

#flex_second form li fieldset {
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------- */
/*                    Grid First                  */
/* ---------------------------------------------- */
#grid_first {
    display: grid;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}

@media screen and (min-width: 600px) {
    #grid_first {
        grid-template-columns: auto auto;
    }
}

@media screen and (min-width: 1200px) {
    #grid_first {
        grid-template-columns: auto auto auto auto;
    }
}

/* ---------------------------------------------- */
/*                    Grid Second                 */
/* ---------------------------------------------- */
#grid_second {
    display: grid;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}

/* Needed when we don't have specific columns and rows */
#grid_second > div {
    min-height: 100px;
}

#grid_second .box9 {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 600px) {
    #grid_second {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 100px 100px;
    }

    #grid_second .box1 {
        grid-column-start: span 2;
        grid-row-start: span 2;
    }

    #grid_second .box9 {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media screen and (min-width: 600px) {
    #grid_second {
        /* The instructions say equal widths, but in the image, the center column is clearly larger */
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: 100px 100px 100px;
    }

    #grid_second .box1 {
        grid-column-start: span 3;
        grid-row-start: span 2;
    }

    #grid_second .box9 {
        flex-wrap: nowrap;
    }
}