CSS Grid

Question 1

How do you create a grid element?

Answer 1

display: grid

Question 2

How do you add columns to a grid?

Answer 2

grid-template-columns:

Question 3

How do you add rows to a grid?

Answer 3

grid-template-rows:

Question 4

What units can you use to define the sizes of colums and rows?

Answer 4

px, em for set sizes
fr: sets the column or row to a fraction of the available space,

auto: sets the column or row to the width or height of its content automatically,

%: adjusts the column or row to the percent width of its container.

Question 5

How do you add a gap between columns or rows?

Answer 5

grid-column-gap:

grid-row-gap:

Question 6

What does grid-gap: do if you pass it one value?

Answer 6

Creates a gap between both columns and rows of the specified size

Question 7

How do you align content vertically in the cell of a CSS grid?

Answer 7

justify-self:

Question 8

What are the possible values of justify-self:?

Answer 8

stretch, which will make the content fill the whole width of the cell. This CSS Grid property accepts other values as well:

start: aligns the content at the left of the cell,
center: aligns the content in the center of the cell,
end: aligns the content at the right of the cell.

Question 9

How do you align content horizontally in the cell of a CSS grid?

Answer 9

align-self:

Question 10

How can you group grid cells into areas?

Answer 10

grid-template-areas:
“header header header”
“advert content content”
“footer footer footer”;

Question 11

How do you designate an empty space in an area template?

Answer 11

.

Question 12

How do you place an element with a given class in an area

Answer 12

.class-name {
grid-area: area;
}

Question 13

How can you create an area template?

Answer 13

grid-area: 1/1/2/4;

Question 14

what values do the numbers represent in grid-area: 1/1/2/4;?

Answer 14

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

Question 15

what function can be used to create multiple rows or columns?

Answer 15

repeat

Question 16

how do you use the repeat function?

Answer 16

repeat(number of rows, size of rows);

Question 17

What function is used to limit the size of items when the grid container changes size?

Answer 17

minmax(min-size),(max size))

Question 18

What option does the repeat function have to automatically insert as many rows and columns as possible?

Answer 18

auto-fill

Question 19

How is auto-fit different from auto-fill?

Answer 19

auto-fit works almost identically to auto-fill. The only difference is that when the container’s size exceeds the size of all the items combined, auto-fill keeps inserting empty rows or columns and pushes your items to the side, while auto-fit collapses those empty rows or columns and stretches your items to fit the size of the container.