/*===
    328lect08-2-2-flex.css - built during recording on 2025-03-18
    by: Sharon Tuttle
    last modified: 2025-03-18
===*/

/*===                                                                           
    give body a small margin                                                    
===*/

body                                                                            
{
    margin: 1em;
}

/*===                                                                           
    set footer element's font size to be tastefully small                       
===*/                                                                           
                                                                                
footer                                                                          
{
    font-size: 0.5em;
}

/*===
    make the container with class="grid-demo-1" use grid layout,
    with 4 columns of width 20%, 30%, 25%, and whatever is left,
    with rows whose height is set to a minimum of 1em and a maximum of
        the default height of its elements,
    with a gap of 0.2 em between the elements in the grid
===*/

.grid-demo-1
{
    display: grid;
    grid-template-columns: 20% 30% 25% auto;
    grid-auto-rows: minmax(1em, auto);
    gap: 0.2em;
}

/*===
    give the div descendants of the element with class="grid-demo-1"
    a red border, a little padding, and a larger font
===*/

.grid-demo-1 div
{
    border: .1em solid red;
    padding: .15em;
    font-size: 2em;
}

/*===
    rules using grid-column and grid-row to place each of the
    elements in the grid container with class="grid-demo-1",
    (and also giving each its own distinctive background color)
===*/

.grid-demo-1 .one
{
    grid-column: 1 / 3;   /* start at column line 1, continue to column line 3 */
    grid-row:    1;       /* start at row line 1, and be 1 row tall */
    background-color: yellow;
}

.grid-demo-1 .two
{
    grid-column: 3 / 5;   /* start at column line 3, continue to column line 5 */
    grid-row:    1 / 3;   /* start at row line 1, continue to row line 3 */
    background-color: green;
}

.grid-demo-1 .three
{
    grid-column: 1;       /* start at column line 1, and be 1 column wide */
    grid-row:    2 / 5;   /* start at row line 2, continue to row line 5 */
    background-color: beige;
}

.grid-demo-1 .four
{
    grid-column: 2;       /* start at column line 2, and be 1 column wide */
    grid-row:    4;       /* start at row line 4, and be 1 row tall */
    background-color: tan;
}

.grid-demo-1 .five
{
    grid-column: 3;       /* start at column line 3, and be 1 column wide */
    grid-row:    3;       /* start at row line 3, and be 1 row tall */
    background-color: orange;
}

.grid-demo-1 .six
{
    grid-column: 3;       /* start at column line 3, and be 1 column wide */
    grid-row:    4;       /* start at row line 4, and be 1 row tall */
    background-color: gold;
}

/*===
    make the container with class="grid-demo-2" use grid layout,
    with rows whose height is set to a minimum of 1em and a maximum of
        the default height of its elements,
    with a gap of 0.2 em between the elements in the grid, and
    with grid columns determined by the number of grid-area names
        in each string in grid-template-areas,
    and with elements placed based on their grid-area names
        within the strings in grid-template-areas
===*/

.grid-demo-2
{
    display: grid;
    grid-auto-rows: minmax(1em, auto);
    gap: 0.2em;
    grid-template-areas: "one one    two  two"
			 "three .    two  two"
			 "three .    five ."
			 "three four six  .";
}

/*===
    give the div descendants of the element with class="grid-demo-2"
    a black border, a little padding, and a larger font
===*/

.grid-demo-2 div
{
    border: .1em solid black;
    padding: .15em;
    font-size: 2em;
}

/*===
    rules giving a grid-area name to each of the elements in
    the grid container with class="grid-demo-2",
    (and also giving each its own distinctive background color)
===*/

.grid-demo-2 .one
{
    grid-area: one;
    background-color: yellow;
}

.grid-demo-2 .two
{
    grid-area: two;
    background-color: green;
}

.grid-demo-2 .three
{
    grid-area: three;
    background-color: beige;
}

.grid-demo-2 .four
{
    grid-area: four;
    background-color: tan;
}

.grid-demo-2 .five
{
    grid-area: five;
    background-color: orange;
}

.grid-demo-2 .six
{
    grid-area: six;
    background-color: gold;
}