Introduction to CSS Layout Quiz
by Kwiz
Qs
22
Difficulty
Junior
Plays
1
Record
n/a
Description

This CSS quiz will cover how to place elements in the right place in relation to the viewport, and one another. This quiz is a deep dive into CSS layout, and new front-end developers & UX designers should be able to comfortably score 75% of more!

The reference docs for this quiz can be found at: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout

Question Preview
Select all of the techniques related to page layout in CSS
Question Preview
__________ is how the browser lays out HTML pages by default when you do nothing to control page layout
Question Preview
What are the 2 element types found in CSS normal flow?
Question Preview
Which of the following methods does not change how elements are laid out in CSS?
Question Preview
The main methods of achieving page layout in CSS are all values of the _______ property.
Question Preview
What is the default display property of the following element?
<a>What is my default display property?</a>
Question Preview
What is the default display property of the following element?
<p>What is my default display property?</p>
Question Preview
The default display property of the <li> element is display: block. How can we change it to display the elements next to each other?
Question Preview
To use flexbox, you apply display: flex to the ________ element of the elements you want to lay out;
Question Preview
To use flexbox, you apply display: flex to the parent element of the elements you want to lay out; all its ________ children then become flex items.
Question Preview
The initial flex-direction value of a flex element (parent) is set to _________
Question Preview
Flexbox is designed to make it easy for us to lay things out in one dimension: either as a ________ or as a _________.
Question Preview
While flexbox is designed for one-dimensional layout, Grid Layout is designed for _______ dimensions
Question Preview
We can switch on Grid Layout with a specific value of?
Question Preview
When using display: grid, we can define row and column tracks using which of the following properties?
Question Preview
How many columns will there be in the following wrapper element?
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}
Question Preview
How many rows will there be in the following wrapper element?
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}
Question Preview
To explicitly place items on the CSS grid, which 2 properties can be used?
Question Preview
The float property has ______ possible values
Question Preview
Which of the following types of CSS positioning does NOT exist
Question Preview
What is the default CSS positioning that every element gets?
Question Preview
Relative positioning allows you to ______ an item from the position in normal flow it would have by default.