WD - CSS - Grid

• A CSS grid is a two-dimensional grid layout system
• TO create a CSS grid the first step is to?

  Define a container element as a grid with display: grid
• Grid is one of the most powerful CSS modules ever introduced. For example you can adjust the layout of a whole webpage as the order of elements is distinct from the HTML, and can be done with a few lines of CSS
• The second step of creating a CSS grid is?

  Set column and row sizes with grid-template-columns and grid-template-rows respectively
• To place child elements into a grid use?

  grid-column and grid-row
• 5 main terms for grids:

  Grid container - an element display:grid all items within that container is the child of the grid

  Grid line - vertical or horizontal residing on either side of a row or column

  Grid track - is the space between two adjecent grid lines, like a row

  Grid area - an area surrounded by four grid lines, can be any size

  Grid cell - space within two grid tracks one horizontal, one vertical. A unit

  Grid item - direct child of grid container
• An inline grids container will only take the space it needs to up and the next container may be on the same row
• To define an inline grid just use?


  inline-grid instead of grid in display:grid;
• To define the template of columns and rows what is used, properties as x?

  grid-template-columns: x; and grid-template-rows: x;
• It is best to avoid putting a grid inside a grid as much as possible
• grid-template-columns/rows work by defining the width of a column or height of a row. Once one value has been added for this there will be one correspondingly sized row/ column
• You can explicitely name rows and columns in grid-template-columns/rows by aving the name in square brackets before the value
• You can give a row or column two or more names by putting the other name/s after the first specified name in the square brackets
• What notation can be used if you have repeating width of columns, etc?

  repeat()
• If there are two columns named 'col-start' how would you select the 1 st one?

  col-start 0;
• The fr unit sets the size of a grid track as a fraction of the space in the grid container, it uses the total of fr in a item as the divisor/denominator
• Grid area can be assigned to items, children of the container
• Grid areas are set with?

  grid-template-areas
• grid-template-areas must specify each cells contents, separating each with a space
• To have an empty cell in a grid-template-areas, what is used?

  Period
• None and a period are distinct in a grid area template, how?


  None is no grid area, period is empty
• What single shorthand property can be used to set grid-template-rows/columns/areas in one?

  grid-template
• grid-template example, equivalent to

  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end]; grid-template-columns: 50px auto; grid-template-areas: "header header" "footer footer";?


  grid-template:

  [row1-start] "header header" 25px [row1-end]

  [row2-start] "footer footer footer" 25px [row2-end]

  / 50px auto;
• grid template format is:

  grid-template: <grid-template-rows> / <grid-template-columns>;}
• In grid-template what can be included in <grid-template-rows>?

  grid areas
• grid-template won't implicitely change grid properties, therefore it is recommended to use grid instead
• You can specify the size of grid lines (gap between grid cells) what is the standard way of doing this?

  gap: <grid-row-gap> <grid-column-gap>;
• All other info can be found on the website css-tricks under the title 'A complete guide to CSS Grid'
• It is good to have the position of items be consistent from html to css as otherwise accessibility tools are less compatible