• web layout evolution
• css positioning
• flexbox review
• introduction to grid
• readings & resources

• prior to flexbox and grid modules of CSS standard, designers worked with CSS positioning and float to achieve page layouts
• float was introduced to deal with wrapping text around images within an element, but was seized upon by coders as an alternative to table layout - was never really intended for laying out entire pages as floating elements are tied to the document flow (affects flexibility)
• could be used effectively for things such as grid-based photo galleries, horizontal menus, and multi-column layouts
• over time, a collection of frameworks evolved:
  • a package of files and folders of standardized HTML, CSS, and/or JavaScript that provide a common structure allowing us to reuse code and save time
  • act as a "starting point" (design best-practices and standardized classes/rules) for styling sites
  • addresses common design/code problem, to be used as a reference to solve similar problems
  • essentially, why reinvent the wheel if you don't have to?
• with the arrival of flexbox and grid modules, native CSS can now challenge the power of frameworks for rapid development

• default value of the position property for elements is static, which means elements will follow normal flow
• we looked briefly at the float property in session four, noting how it takes objects out of normal flow
• likewise, positioned objects are taken out of the normal flow and behave differently, e.g., overlapping, or remaining fixed in the browser display
• positioning is always with respect to a frame of reference, like the parent element or the whole page (e.g. body element) by default
  • static positioning is the default; elements fall into their normal position in the document flow
  • relative positioning is similar to static positioning, except you can change the location of an element in relation to where it would otherwise appear
  • absolute positioning disregards normal flow and allows you to place an element exactly where you say - coordinates apply to the whole page, unless the parent element is a postioned element as well
  • fixed positioning is done in reference to viewport - useful for creating persistent UI elements like fixed menus that are always visibile even as page scrolls
  • sticky positioning is a hybrid between relative and fixed position - allows a positioned element to act relatively positioned until scrolled to a certain point (e.g., the top of the viewport), after which it becomes fixed.
  • none of the above values for the position property will work without top, bottom, left, or right properties that specify exactly where to position an element
• arrival of standard wc3 modules for Flexbox and CSS Grid makes the use of positioning for full page layout unusual (and unnecessarily painful), but there may still be times when it makes sense for particular content design challenges (e.g., text overlay)
• review the positioning examples in the 00_css_positioning_begin folder from this session's resource files

• flexbox makes it easier to design responsive layout structure without using positioning or floats
• flexbox containers:
  • define a container - becomes flexible by setting display: flex;
  • flex container properties include:
    • flex-direction - direction the container wants to display the flex items
    • flex-wrap - defines how items will wrap
    • justify-content - used to align items
    • align-items - the alignment of items on the cross axis (e.g., vertical or horizontal)
    • align-content - positions content and allows flex items to wrap
• flex items:
  • the direct child elements of a flex container become flex items
  • flex container properties include:
    • order - specifies the order of the items
    • flex-grow - specifies how much a flex item will grow
    • flex-shrink - specifies how much a flex item will shrink
    • flex-basis - specifies the initial length of a flex item
    • align-self - specifies alignment for the selected item inside the flexible container
• intended for one-dimensional layouts
• review: take a few minutes to review session 04 to reacquaint yourself with flexbox

• like flexbox, CSS grid gets applied to a parent element and its direct descendants automatically become grid items
• inside individual grid elements, content is managed using whatever techniques you wish - use float, position, or flex as needed (e.g., float to wrap text around an image inside a grid cell
• supports 2-dimensional layout and can adapt more fluidly, i.e., responsive elements without necessarily using media queries
• allows us to align page elements into columns and rows, but far more powerful as grid container child elements can overlap/layer similar to positioned elements
• grid features:
  • fixed and flexible tracks (columns/rows) - grids can be created with fixed track sizes (e.g., pixels) or flexible sizes using percentages or fr unit (fractions)
  • item placement - items can be placed into a precise location on a grid using line numbers, names, or a specific area of the grid (grid areas)
  • create additional tracks implicitly - an explicit grid can be created but specification is flexible enough to add additional rows and columns when needed
  • alignment control - can control how grids as a whole are aligned as well as how items are aligned in a grid area
  • overlapping content - multiple items can be placed into a grid cell or area, partially overlapping each other (control this with the z-index property)
• important elements:
  • grid container - the parent element to which display: grid; is applied
  • grid item - the direct descendants of a grid container
  • grid lines - the horizontal or vertical lines separating the grid into sections (you will use these to positon grid items)
  • grid cells - intersection between a row and column (essentially the same as a table cell)
  • grid track - the space between two grid lines (helps to think of them as "rows" and "columns")
  • grid area - the space between four sepcified grid lines; can cover one or more cells
  • grid gap - empty space between grid tracks
• defining grids:
  • start by defining a grid container with display: grid; - as soon as we do this, all direct descendants are automatically grid items
    

            .item {
                display: grid;
            }
        

  • define grid tracks using grid-template-columns and grid-template-rows - options for defining width/height
    

            .item {
                display: grid;
                grid-template-columns: 10% 4em 20px 50vw;
                grid-template-rows: repeat(3 1fr);
            }
        

  • place items on the grid by defining grid-column and grid-row values
    

            .item {
                display: grid;
                grid-template-columns: 10% 4em 20px 50vw;
                grid-template-rows: repeat(3 1fr);
            }
            
            .banner {
                grid-column: 1/5;
                grid-row: 1/2;
            }
    
            .main {
                grid-column: 1/3;
                grid-row: 2/3;
            }
        

• flex vs. grid:
  • in many cases, you can acheive identical effects from using either flex or grid
  • flexbox characteristics:
    • items sizes are defined in the flex items
    • organizes elements on a linear path
    • ideal for navigation bars, sticky footers, many page layouts
  • grid characteristics:
    • item size is defined in the grid container
    • organizes elements on a 2-dimensional grid
    • essential for card layouts

1. Take some time to work through Grid Garden to acquaint yourself with grid.
2. From the session09 files, update the style sheet in 02_grid_exercise_begin to create a grid layout for the page.
3. From the session09 files, update the style sheet in 03_responsive_grid_begin to add media queries as directed.
4. From the session09 files, update the style sheet in 04_responsive_grid_card_begin to add media queries as directed.

objective: Recreate a grid layout with the basic orientation and responsive qualities shown in sample wireframes.

See detailed requirements.

• The Mystery Of The CSS Float Property (2009)
• Absolute, Relative, Fixed Positioning: How Do They Differ?
• CSS Position Property
• How CSS Positioning and Flexbox Work – Explained with Examples
• Practical positioning examples
• HTML Layout Elements and Techniques (w3Schools)
• CSS Layout Templates (float, flex, grid)
• Flexbox resources:
  • Flexbox Froggy
  • Flexbox cheatsheet
  • Flexbox generator
  • Flexbox patterns
• Grid resources:
  • A Complete Guide to Grid
  • Basic Concepts of Grid Layout
  • CSS Grid is a Grid Framework
  • Responsive CSS Grid with No Media Queries (video)
  • Responsive grid in 2 minutes with CSS Grid Layout
  • Making Modern Layouts with CSS Grid | CSS Grid Basics
• Relationship of grid layout to other layout methods
• Flexbox vs. CSS Grid: Which Should You Use and When?