=====
CS 328 - Week 8 Lecture 2 - 2026-03-11
=====
=====
TODAY WE WILL
=====
* announcements
* CLIENT TIER: continuing CSS
* CSS flexbox layout, continued
* intro to CSS grid layout
* prep for next class
=====
* Should be working on Homework 6
* at-least-1st-attempts due by 11:59 pm on Friday, March 13
* Should now start reading/working through the course zyBook
Chapter 4, "More CSS", linked from the course Canvas site
* so, should be reading/working through both Chapters 3 and 4 now,
BUT, the deadline for credit for those activities is
11:59 pm Friday, April 10 (the Friday before Exam 2)
=====
=====
keep in mind: when a container element is to
use something other than normal flow...
=====
* ...it is generally the container element's rule that
incudes a declaration
display: ...;
======
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
=====
intro to 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]...."
* if I want a container element to use grid layout,
give a rule including the declaration:
display: grid;
* many possible and potential properties related to
grid layout!
* for example:
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 give this property a percentage width for each
desired column, space-separated;
grid-template-columns: 20% 30% 25% auto;
* you can let the number of rows be determined automatically;
you can also do that, but specify minimum/maximum heights for
the rows using:
grid-auto-rows
* and there's a function minmax that lets me specify a
desired minimum and maximum --
grid-auto-rows: minmax(1em, auto);
...and it means I want a value no LESS than 1em and no MORE that
the automatically-determined size
* can also have a gap specifying the space between
rows and columns;
gap: 0.15em;
* elements within a grid container are by default placed in
the grid top-to-bottom, left-to-right,
with as many rows as are needed to place all of the items
BUT there are at least TWO ways to position elements
when the default is not quite what you want
* (and there are more properties possible for justifying and
aligning grid elements -- see the zyBooks Chapter 4 Section 4.2
for more on these)
=====
positioning grid elements using numeric row
and column positions
=====
* IMAGINE a grid,
numbering the row LINES from 1 ...
and the column LINES from 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
* for an individual element,
you can say:
grid-column: col-line-start / col-line-end;
* means: start at column line col-line-start,
up to column line col-line-end
grid-row: row-line-start / row-line-end;
* means: start at row line row-line-start,
up to row line row-line-end
* (if you put just 1 number, it is assumed to
be just 1 column/1 row...)
grid-column: X; /* start at column line X, and be one column wide
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)
=====
second approach: giving grid-area names and
specifying position using grid-template-areas
=====
* to do this, first give names to the grid elements you are going to
be placing in the grid --
using the grid-area property in a rule for each grid element
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)
* for example:
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