Web Developer Fast Track

Winter 2022

CSS Grid

Lab Activity: 404 Error Page

  • Due: Friday January 28 @ 11:59PM
  • Goals:
    • Apply a background image
    • Experiment with layout
      • positioning over a background image
      • using grid and or flexbox to make interesting layouts
    • Build a 404 error page that you can use in future assignments (if it doesn't match the website)

CSS Grid: Introduction

  • CSS Grid Provides a diverse set of options to organize content into responsive grid layouts
  • You can nest grids within one another
  • CSS Grid is like flexbox and can be used with flexbox
    • Use CSS Grid to organize containers that have content in them
      • Then use Flexbox to position elements inside of their containers

Usage Notes

  • use display: grid to create grid
  • grid-template-columns is one of the most used declarations for grid
  • fr units are used to set grid items to a declared fraction of available space
  • minmax() is used to declare a minimum and maximum size of grid item
  • repeat syntax
    • auto-fit, auto-fill are particularly useful for flexible layouts
    • Often using a rigidly sized parent element can be useful for setting the grid row's max width
  • Tony's grid starter code gist
  • Complex Grid Design

Resources for getting a grid layout off the ground

Breakout Session

Background Images

  • Important Syntax:
    • background-image: url(""); is used to assign a background image to an element in css
    • background-position: ; is used to set where the position is aligned
    • background-size: ; handles how the image will fit in it's available space. It handles the aspect ratio
    • background is a shorthand css property to declare the above properties in 1 statement

Lab Time

Prep