COMP 126 Chpt 10
after you assign names to grid lines, you can use them in the grid row and grid column properties for each area in the grid
.
to identify the rows and cols for a grid area that an element occupies you code the line names on the grid row and the grid col props
.
What order does the auto-placement algo place items?
1. Anything to which you've assigned placement properties (such as grid lines or a template area) 2. Anything that has spans applied to it 3. Each remaining item is placed in a grid cell in the order in which it appears in the HTML--unless you've set grid-auto-flow: dense; in which case it attempts to backfill any gaps in the grid with any item that fits
Roughly how much of a typical website should utilize that site's chose accent color?
10%
You have a container that is 600px wide and 3 columns. There is a 20px col gap. How many px will each col take up if we set each to be 1fr?
200px
The css animation property always points to an
@keyframe selector rule that defines the keyframes that are used in the animation sequence
By default grid items are laid out ____
From left to right and top to bottom
grid gaps arent added between ___ within the same grid area
cells
The first step in the design of any website should be to
define the target audience and goals of the website
unless you specify otherwise, grid items are laid out within a grid containter
from left to right and top to bottom
space-evenly
full size spaces are added before the first grid track and after the last grid track
In a complex layout, you define ____ that contain grid items?
grid areas
In complex layouts, what contains the grid items?
grid areas
What property do you use to change the order elements appear in a grid container?
grid-auto-flow
what property and value should you use if you want to create flexible columns?
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
Which layout is commonly used to display a series of images?
headline and gallery layout
justify-items
horizontally aligns grid items within a grid area. default is stretch
justify-content
horizontally aligns grid tracks within a container when the tracks are less than the overall width of the container. Default is start.
you can align the row tracks within a container vertically
if the row tracks are less than the height of the container
Implicit grid
if you place an item outside of that grid the browser will create an this line or lines to hold that item. This is created by the this lines which are auto sized.
.container-fluid
in BS provides a full width container spanning the entire width of the viewport
.container
in BS provides a responsive fixed width container
In BS only columns can be immediate children of rows
in BS rows have negative margins so they extend the full width of the container
Unlike tradition sequence writing, chunking is thought to be better for web writing because
it lets the users select the content theyre interested in
To align grid items within a grid area, you use what CSS properties?
justify-items justify-self align-items align-self
You can align the row tracks it contains vertically if the grid tracks are ____ that the ____ of the container.
less, height
You can align the column tracks it contains horizontally if the grid tracks are ____ that the ____ of the container.
less, width
The transform property
lets you apply one or more transforms to an HTML element
The transform origin property
lets you change the origin point for the transform
h1 {animation: move 3s ease-in-out 2s; } @keyframes move { from { margin-left: 20%; color: blue;} to { margin-left: 60%; color: red;} }
moved to the right over 3 seconds after a delay of 2 seconds
you use the grid-row and grid-column properties to define grid areas when you use
named or numbered lines
If you only have 1 column do you have to declare it?
no
Which of the following is NOT a guideline for usability?
no navigation elements in the footer
to implement the 12 col css grid concept you use
numbered lines
grid-row/column can have what types of values?
numbers or name values for grid lines
justify-self
overrides the grid areas horizontal alignment for an individual grid item
align-self
overrides the grid areas vertical alignment for an individ grid item
the minmax function is typically used with what other function to specify the min and max sizes of one or more tracks?
repeat()
Grid track
rows and columns in a grid container
which of the following css style rules positions a section element in row tracks 2 through 4 and col tracks 2 and 3 of a grid container
section { grid-row: 2/5; grid-column: 2/4; }
space-between
space is allocated evenly bw grid tracks
space-around
space is allocated evenly bw grid tracks, but half size spaces are also added before the first grid track and after the last grid track
Instead of specifying an ending line number, you can use what keyword to indicate how many col an element takes up
span
justify-items justify-self align-items align-self can have what values?
start, end, center and stretch
Which of the following can you not specify within a css transition rule?
the condition that will cause the transition to occur
What will happen if the css that follows is applied to an h1 element? h1 { animation: animateheading 2s ease-in-out 2; } @keyframes animateheading { from { font-size: 120%; } to { font-size: 200%; } }
the font size of the heading will increase to 200% over 2 secs, change back to 120% and then repeat
When you use grid template properties what do you have to specify?
the heights of the row tracks and the width of the column tracks with a forward slash bw them
the minmax function specifies
the min and max sizes of one or more tracks
which of the following methods would you use to transform an element so it appears lower than its original position?
translateY
Grid cell
two adjacent row and column grid lines
grid cell
two adjacent row and column grid lines
Grid area
two or more grid cells that form a rectangle
grid area
two or more grid cells that form a rectangle
repeat function
used to specify one or more track sizes the specified number of times
minmax function
used to specify the min and max sized for a grid track
align-items
vertically aligns grid items within a grid area. Default is stretch
align-content
vertically aligns grid tracks within a container when the tracks are less than the overall height of the container. Default is start
auto fill
when there is space large enough to provide for additional min sized grid items, this keyword provides enough space for those items even if the items aren't declared in the HTML
Line based positioning
when you use line numbers to specify width/height of track.
Can you combine fixed, relative and fractional track sizes?
yes
when you use template names for page layout,
you first define the template areas and then assign elements to those areas
What does the target pseudo class do?
It selects the div element that is the target of the <a> element that has been clicked
chunking makes the info more accessible to the user and reduces the need for scrolling
Javascript is commonly used to implement chunking with features like accordions and tabs
grid lines
Lines on either side of a grid track
A css grid track is made up of
a column or row within a grid container
the fr unit of measure represents
a fraction of the available space within a container
Each cell contains what?
a grid item
Explicit grid
a grid that is created when you say grid template col/row
Nested block
a nested block within a grid element is NOT considered a grid element as well. It ill match the normal flow of the document. You need to explicitly say grid and give it a track definition. aka the nested grid does NOT inherit from the parent gird. If we do want it to inherit from parent you have to say grid-template-columns: subgrid;
which of the following can you use in a @keyframes selector to indicate property values for specific positions in an animation?
a percentage from 0 to 100
What is a grid item?
a structural element like a nav or div element
to slowly rotate an image when the user hovers the mouse pointer over it, you can use
a transform and a transition
fr unit
a unit of measure that represents a fraction of the space that's available within a container.
when you define grid areas for a grid with grid gaps, the gaps
are added between the grid areas
auto fit
as many grid items as will fit in the available space will be placed in the container and they will expand when necessary to fit the available space
Instead of using a repeat function to determine the number of tracks that will be repeated, what keywords can you use instead?
auto-fit and auto-fill