Web Quizizz 16

What has this entire unit been about?

• div

• img

• p

• a

grid-template-columns: 1fr 1fr 1fr 1fr;

How many columns will this grid have?

• 1

• 2

• 3

• 4

Answer explanation

There are 4 numbers

We use ​ (a)   to determine the number of columns for the ENTIRE grid. We use ​ (b)   to make individual divs bigger or smaller

• grid-template-columns
• grid-column & grid-row

Answer explanation

There are 4 numbers

.mystery {

grid-column: span 3;

}

A div with the mystery class will be...

• Normal size

• 3 columns wide

• 3 rows tall

• 2 columns wide, 2 rows tall

.mystery {

grid-row: span 3;

}

A div with the mystery class will be...

• Normal size

• 3 columns wide

• 3 rows tall

• 2 columns wide, 2 rows tall

.mystery {

grid-row: span 2;

grid-column: span 2;

}

A div with the mystery class will be...

• Normal size

• 3 columns wide

• 3 rows tall

• 2 columns wide, 2 rows tall

.mystery {

grid-column: span 2;

}

.mystery2 {

grid-column: span 3;

}

Is it valuable to have both of these classes?

• Yes because they do different things

• No because they do the exact same thing

.mystery {

grid-column: span 2;

}

.mystery2 {

grid-column: span 2;

}

Is it valuable to have both of these classes?

• Yes because they do different things

• No because they do the exact same thing

Answer explanation

There's no point in having 2 classes that make a cell 2 columns wide

grid-column: ?????

Which would you use to make a cell 3 columns wide?

• span 1

• span 2

• span 3

• span 4

grid-column: ?????

Which would you use to make a cell 4 columns wide?

• span 1

• span 2

• span 3

• span 4