GridBox

Question 1

Grid Box Declaration

Answer 1

Display: grid;

Question 2

Role of the ‘grid-template-columns’ property

Answer 2

The grid-template-columns property can also be used to specify the size (width) of the columns.
This can be specified in a variety of ways

Question 3

Role of the ‘justify-content’ property in the grid

Answer 3

The justify-content property is used to horizontally align the whole grid inside the container.

Question 4

Role of the ‘align-content’ property in the grid

Answer 4

The align-content property is used to vertically align the whole grid inside the container.

Question 5

What is a grid ‘item’

Answer 5

This term refers to a DIRECT descendant of the grid container. (The item’s children are NOT items in that sense.)

Question 6

What is a grid ‘area’

Answer 6

The total space bounded by four grid lines

Question 7

How do you define the # of rows and columns in a grid?

Answer 7

Use the ‘grid container’ properties:
grid-template-columns and
grid-template-rows
The align-content property is used to vertically align the whole grid inside the container.

Question 8

What is the syntax of the ‘repeat’ option in grid definition?

Answer 8

If your definition contains repeating parts, you can use the repeat() notation to streamline things:

.container {
grid-template-columns: repeat(3, 20px [col-start]);
}

Which is equivalent to this:

.container {
grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

If multiple lines share the same name, they can be referenced by their line name and count.

.item {
grid-column-start: col-start 2;
}

Question 9

What is the syntax of the ‘fr’ unit?

Answer 9

The fr unit allows you to set the size of a track as a fraction of the free space of the grid container. For example, this will set each item to one third the width of the grid container:

.container {
grid-template-columns: 1fr 1fr 1fr;
}

The free space is calculated after any non-flexible items. In this example the total amount of free space available to the fr units doesn’t include the 50px:

.container {
grid-template-columns: 1fr 50px 1fr 1fr;
}

Question 10

What is the proper syntax for the name grid area command?

Answer 10

grid-area

Gives an ITEM a name so that it can be referenced by a template created with the grid-template-areas property. Alternatively, this property can be used as an even shorter shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.

Values:

 – a name of your choosing
 /  /  /  – can be numbers or named lines

.item {
grid-area: | / / / ;
}