CSS Grid

Question 1

How to make any element into a css grid?

Answer 1

display: grid;

Question 2

grid-template-columns:

Answer 2

a property that indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.

Question 3

grid-template-rows:

Answer 3

used to adjust the amount and width of rows

Question 4

CSS Grid units:

Answer 4

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

grid-column-gap:

Answer 5

Used to add gaps between columns.

Question 6

grid-row-gap:

Answer 6

Used to add gaps in between rows.

Question 7

grid-gap

Answer 7

Short hand for grid-row/column-gap. If grid-gap has one value it will create a gap between all rows and columns; if there are two values, it will use the first one to set gaps for the rows and the second for columns.

Question 8

grid-column:

Answer 8

a property used to control the amount of columns an item will consume.

(ex: grid column: 1 / 3;
this will make the item start at the first vertical line on the lift and span to the third, consuming two columns.)

Question 9

grid-row:

Answer 9

a property used to control the amount of rows an item will consume.

Question 10

justify-self:

Answer 10

A property used to align the content’s position within a cell, horizontally.

Question 11

justify-self: start;

Answer 11

aligns the content at the left of the cell.

Question 12

justify-self: stretch;

Answer 12

will make the content fill the whole width of the cell.

Question 13

justify-self: center;

Answer 13

aligns the content in the center of the cell.

Question 14

justify-self: end;

Answer 14

aligns the content at the right of the cell.

Question 15

Cell

Answer 15

The content of each item is located in a box known as the grid.

Question 16

align-self;

Answer 16

A property used to align the content’s position within a cell, vertically. It accepts all the same values as justify-self.

Question 17

justify-items:

Answer 17

A property used to align ALL items at once horizontally. Accepts all the values that justify-self and align-self do.

Question 18

align-items:

Answer 18

Similar to justify-items, it will align all items but do so vertically.

Question 19

grid-template-areas:

Answer 19

A property that is used to group cells of your grid together into an area and give the area a custom name.
Example:
grid-template-areas:
“header header header”
“advert content content”
“footer footer footer”;
Every word in the code represents a cell and every pair of quotation marks represent a row.
You can use a period to designate and empty cell in the grid.

Question 20

grid-area:

Answer 20

After creating an area’s template you can place an item in your custom area by referencing the name you gave it.
Example: .item1 { grid-area: header }

Question 21

Use grid-area w/o creating an areas template.

Answer 21

If your grid doesn’t have an area template to reference you can create on on the fly, like this:
item1 { grid-area: 1/1/2/4 }

These numbers represent:
grid-area: horizontal line to start at / vertical line to start at / horizontal line to start / vertical line to start at;

Question 22

grid-template-row/columns: repeat;

Answer 22

A function that is used to create several row/columns of the same size.

Example: grid-template-rows: repeat(100, 50px); this example would create 100 rows that are 50 px tall.

Question 23

minmax

Answer 23

Function used for grid-template-row/columns. It’s used to limit the size of items when the grid container changes size

ex: grid-template-columns: 100px minx(50px, 200px);

In this example grid-template-columns is set to create two columns; the first is 100px wide, and the second has the minimum width of 50px and the maximum width of 200px.

Question 24

repeat(auto-fill)

Answer 24

autofill is an option for repeat that allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of your container.

example:
repeat(auto-fill, minimal(60px, 1fr));

Question 25

auto-fit

Answer 25

almost identical to auto-fill except that when the container’s size exceeds the size of all 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..