CSS Grid

Question 1

Turn a div into a grid container

Answer 1

display: grid

Question 2

What property specifies column widths?

Answer 2

grid-template-columns: 100px 600px 300px

Question 3

How can you name a column?

Answer 3

grid-template-columns: [column-name] 1fr [column-name] 2fr … (Each side of a column can only have one name)

Question 4

What property creates modules for “modular” layouts?

Answer 4

grid-template-area

Question 5

Use modular layout property to make title span top and a sidebar and main area below

Answer 5

grid-template-area:
“title title”
“sidebar main”

Question 6

Create 3 rows with equal heights

Answer 6

grid-template-rows: 1fr 1fr 1fr

Question 7

What’s shorthand for having a column extend from column 1 to column 4?

Answer 7

grid-column: 1 / 4 (or use named columns) Also, grid-template-area might be a better way to handle this situation.

Question 8

Can you name grid-template-columns with multiple names?

Answer 8

No, but you can use names in multiple ways:
[a-start] 1f [b-start] 1fr [b-end] 1f [a-end];
.grid-item { grid-column: a/b; // on left
.grid-item { grid-column: c/c; // on right
.grid-item { grid-column: a; // full width