/*===
    328lect08-2-grid.css - built (mostly) during class on 2026-03-11
    by: Sharon Tuttle
    last modified: 2026-03-12
===*/

/*===
    give the body a small left and right margin
===*/

body
{
    margin-left: 1em;
    margin-right: 1em;
}

/*===                                                                                    
    set footer element's font size to be 0.5 em (0.5 times the                           
    size of an uppercase M in the current font...)                                       
===*/                                                                                    

footer                                                                                   
{
    font-size: 0.5em;
}

/*===
    give all div elements a tasteful blue border
===*/

div
{
    border: 0.1em solid blue;
}

/*===
    make the container with class="grid-demo-1" use grid layout,
    with 4 columns of width 10%, 40%, 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,
    and with a margin of 2em *around* the container
===*/

.grid-demo-1
{
    display: grid;
    grid-template-columns: 10% 40% 25% auto;
    grid-auto-rows: minmax(1em, auto);
    gap: 0.2em;
    
    margin: 2em;
}

/*===
    NOTE: by DEFAULT, grid elements will be placed into cells
    top-to-bottom, left-to-right, in the order they appear
    in the container, 1 cell each -- BUT there are several
    ways of laying them out differently than that default.
===*/

/*=== 
    FIRST trying the grid layout approach using
    grid-column and grid-row properties for each
    grid element, specifying which cell(s) they
    should be placed within in their grid container
    element
===*/

/*===
    place the descendant of the element with class="grid-demo-1"
    that has class="one"
    so that it takes up the first two cells of the first row
    in its container element's grid, and has a yellow background
===*/

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

/*===
    place the descendant of the element with class="grid-demo-1"
    that has class="two"
    so that it takes up the 3rd and 4th cells of the first row
    and the 3rd and 4th cells of the second row
    in its container element's grid, and has a green background
===*/

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

/*===
    place the descendant of the element with class="grid-demo-1"
    that has class="three"
    so that it takes up the 1st cell of the 2nd, 3rd, and 4th rows
    in its container element's grid, and has a beige background
===*/

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

/*===
    place the descendant of the element with class="grid-demo-1"
    that has class="four"
    so that it takes up the third cell of the second row
    in its container element's grid, and has an orange background

    (note that it is OVERLAPPING and on top of the element with
    class="two"!)
===*/

.grid-demo-1 .four
{
    grid-column: 3;    /* start at col line 3, go 1 col */
    grid-row: 2;       /* start at row line 2, go 1 row */
    background-color: orange;
}

/*===
    place the descendant of the element with class="grid-demo-1"
    that has class="five"
    so that it takes up the second cell of the fourth row
    in its container element's grid, and has a tan background
===*/

.grid-demo-1 .five
{
    grid-column: 2;    /* start at col line 2, go 1 col */
    grid-row: 4;       /* start at row line 4, go 1 row */
    background-color: tan;
}

/*===
    place the descendant of the element with class="grid-demo-1"
    that has class="six"
    so that it takes up the third cell of the fourth row
    in its container element's grid, and has a gold background
===*/

.grid-demo-1 .six
{
    grid-column: 3;    /* start at col line 3, go 1 col */
    grid-row: 4;       /* start at row line 4, go 1 row */
    background-color: gold;
}

/*=== 
    NOW trying the grid layout approach using
    the grid-template-areas property in the grid container
    based on the values of the grid-area property
    in each grid element
===*/

/*===
    make the container with class="grid-demo-2" use grid layout,
    with 4 columns of width 10%, 40%, 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,
    and with a margin of 2em *around* the container,

    and using grid-template-areas to specify the cell(s) each
    element within should be placed in, based on the value of
    that element's grid-area property

    (remember: . means that cell should be empty)

    (IF any elements within this container were not specified
    in grid-template-areas' value, they would
    be placed automatically, possibly, um, oddly... but
    that should NOT be the case in this example!)
===*/

.grid-demo-2
{
    display: grid;
    grid-template-columns: 10% 40% 25% auto;
    grid-auto-rows: minmax(1em, auto);
    gap: 0.15em;
    margin: 2em;
    grid-template-areas:
        "first first second second"
	"third .     second second"
	"third .     fourth ."
	"third fifth sixth .";
}

/*===
    rules giving the descendants of the element with class="grid-demo-2"
    each their own background color and grid-area property name,
    based on their class attribute value
===*/

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

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

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

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

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

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