=====
CS 328 - CSS Grid Intro Demo Recording - 2025-03-18
=====

=====
IN THIS RECORDING WE WILL
=====
*   intro CSS grid layout

=====
*   recall: that you can change an element's default display
    properties using the display property

    *   and that if you would like a container element to
        have its contents placed differently than using
	CSS normal flow,

        you can give that container a CSS rule that
	styles it with a specific value for its display
	property

=====
*   for grid layout,
    the value of the display property should be grid:

    .my-container
    {
        display: grid;
	...
    }

======
a LITTLE advice:
======
*   before you start laying out a form,
    it is a GOOD IDEA to sketch out what you are envisioning

    *   it doesn't have to be pretty!
    *   but, you can consider which layout approaches might work
        best

    *   (and if it is a grid, perhaps sketch out the underlying
        rows and columns...)
	*   and then NUMBER each ROW line starting at 1,
	*   and then NUMBER each COLUMN line starting at 1

        *   for example: see the figure adapted from 
	    Figure 4.2.1 the zyBooks text Chapter 4 Section 4.2
	    posted along with these notes

=====
CSS grid layout
=====
*   nice when your form or web page parts are to laid out in
    a "2-dimensional" nature;

    especially if it seems natural to think of them as being
    in rows and columns;

*   from MDN,
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

    "CSS Grid Layout excels at dividing a page into major regions
    or defining the relationship in terms of of size, position, and
    layer, between parts of a control built from HTML [elements]...."

*   a typical way (not the only way!) to specify how many columns
    you want in your grid is to use property:

    grid-template-columns

    ...and put space-separated percentages (or auto) for each
       desired column

    grid-template-columns: 20% 30% 25% auto;

*   you can let the number of rows be determined automatically;
    and you can specify how tall the automatic rows are with
    a property such as grid-auto-rows

    *   function minmax expects 2 values, a desired minimum and a
        desired maximum,

	minmax(1em, auto)

        ...and it means I want a value no LESS than 1em and no MORE that
	   the automatically-determined size

    *   if I use this as the value grid-auto-rows:

        grid-auto-rows: minmax(1em, auto);

        ...each row will be no SHORTER than 1em, and no TALLER than the
	automatic height of each element

    *   if you just do the above,
        items will be placed in the grid top-to-bottom,
	left-to-right, with as many rows as are needed to place
	all of the items

    *   we can use the gap property here, also, to specify a desired
        spacing between elements in this grid

    *   (and there are more properties possible for justifying and
        aligning grid elements -- see the zyBooks Chapter 4 Section 4.2
	for more on these)

=====
*   there are several approaches to placing specific elements into
    specific cells in your grid --
    we are going to discuss two of them:
    *    classic: specify the placement via desired
         row line number and column line number
	 
    *    and an approach where you name elements and
         specify their placement via those names

*   think about a grid,
    and number the *lines* defining its rows starting at 1 (not 0)
    and number the *lines* defining its columns starting at 1 (not 0)

    *   for example: see the figure adapted from 
	Figure 4.2.1 the zyBooks text Chapter 4 Section 4.2
	posted along with these notes
        
    *   then, for an element to start in a particular column,
        for that element give a desired grid-column property:

        grid-column: X / Y;   /* start at column line X, up to column line Y */
        grid-column: X;       /* start at column line X, and be one column wide */

    *   then, for an element to start in a particular row,
        for that element give a desired grid-row property:

        grid-row: X / Y;   /* start at row line X, up to row line Y */
        grid-row: X;       /* start at row line X, and be one row tall */

    *   (and there is a grid-area property where you can give the desired
        row and column placements in one declaration -- see zyBooks Chapter 4
	section 4.2 for the correct order of values)

=====
but you can also NAME grid areas...

*   to do this, first give names to the grid items you are going to
    be placing in the grid --
    using the grid-area property

    grid-area: desired_name;   /* treat this value like an identifier -- no quotes! */

*   now, in the rule laying out your grid container,
    use the property grid-template-areas,
    with a value as follows:
    *   give one (double-quoted) string per row
    *   and give the grid-area name each time
        it is to be placed in a cell in that row
    *   (and you can put a . to say nothing goes in that cell)

    desired_cont
    {
        display: grid;
	grid-template-areas: "desired1 desired2 desired2"
	                     "desired1 desired3 desired4"
			     ".        desired3 .";
    }

    *   that is, the above specifies that:
        *   the grid element with grid-area: desired1
            will be two rows tall and one column wide in the top left;

        *   the grid element with grid-area: desired2
	    will be one row tall and two columns wide in the top right;

        *   the grid element with grid-area: desired3
	    will be two rows tall and one column wide in the lower middle;

        *   the grid element with grid-area: desired4
	    will be one row tall and one column wide on the middle right;

        *   and, there are empty cells in the lower left and lower right

*   also see the posted example