Week 6ART 239 Web Design I

Class Notes for Monday 3/4/19, Wednesday 3/6/19

Agenda

Download the Class Presentation PDF

What is Grid Layout?

CSS Grid Terminology

grid container
Element containing a grid, defined by setting display: grid;
grid item
Element that is a direct descendant of the grid container.
grid line
Horizontal (row) or vertical (column) line separating the grid into sections. Grid lines are referenced by number, starting and ending with the outer borders of the grid. Grid lines can also be named for easier reference.
grid cell
The intersection between a grid row and a grid column.
grid track
The space between two or more adjacent grid lines. Row tracks are horizontal, Column tracks are vertical.
grid area
Rectangular area between four specified grid lines. Grid areas can cover one or more cells.
grid gap
Empty space between grid tracks, commonly called gutters.
grid-template-columns
Draws grid lines. Takes a list of length values (em, px, %, fr, etc.) denoting the distance between each line.
grid-template-rows:
Draws grid lines. Takes a list of length values (em, px, %, fr, etc.) denoting the distance between each line.
fraction (fr) unit
The fr unit represents a fraction of the available space in the grid container.
minmax( ) function
The minmax() function defines a size range greater than or equal to min and less than or equal to max.
Example: grid-template-rows: 1fr minmax(10em, 20em) 1fr;
repeat( ) notation
The repeat() notation repeats the provided pattern a specified number of times.
Example: grid-template-rows: repeat(2, 1fr) 2fr;
placement by lines
grid-column: 2/4;
grid-row: 2/3;
Applied to grid items. Places the item by declaring start and end lines.
span keyword
The span keyword is used to define how many grid tracks an element should span.
Example: grid-columns: 2/span 3; (This will start at line 2 and span 3 columns.)
grid-template-areas

Applied to the grid container. Uses a text-based grid map to apply grid area names to individual cells. Identical names will be grouped together into a single area.

Example:

grid-template-areas:
   "header header header header"
   "nav nav nav nav"
   "section section aside aside"
   "footer footer footer footer";

implicit lines
If grid item placement requires additional columns or rows to be created, the browser adds implicit lines to keep the grid structurally sound.