Grid

Question 1

How do you create a grid?

Answer 1

Within the selector for the grid container, set the display property to grid and set the amount of columns, rows or both.

Question 2

How would you create a grid with 2 columns and 2 rows? What about one with 2 columns, or just 2 rows?

Answer 2

grid-template: repeat(2, 1fr) / repeat(2, 100px);
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);

Question 3

How do you create a grid where you define where each grid item is placed on the grid or ‘area’?

Answer 3

grid-template-areas: ‘nav’
‘main’
‘footer’;

Question 4

How could you add spacing between the grid columns and rows?

Answer 4

grid-gap: 10px

Question 5

For a specific grid item how could you define what column and row it starts and ends at? How about just columns and row?

Answer 5

grid-area: 1 / 1 / 5 / 2;
grid-row: 1 / 5;
grid-column: 1 / 2;

Question 6

How could you make your grid responsive to change the layout of the grid items when the users screen is smaller? Such as mobile users.

Answer 6

@media only screen and (max-width: 600px) {
grid-template: 200px / repeat(6, 1fr);
}