curriculum/challenges/english/blocks/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md
To pass the quiz, you must correctly answer at least 18 of the 20 questions below.
What is CSS Grid?
A method used for displaying tables on a website.
A method used for tiling images.
A way to display outlines around HTML elements.
A two-dimensional layout for HTML documents.
Which of the following is the correct way to create a grid container?
display: grid-area;
grid: grid-template;
grid-template: set;
display: grid;
What does the grid-template-columns property do?
Defines two columns and three rows for a grid container.
Sets all columns for the grid layout to a fixed length.
Creates a two column grid layout container.
Defines the number of columns in a grid layout.
What does the grid-template-rows property do?
Specifies a grid item's size and location in a grid layout.
Creates a template for creating new grid rows.
Specifies a default row size in the grid container.
Specifies the number and height for each row in a grid layout.
What does the minmax() function do?
Toggles between the first and second value, depending on available space.
Returns the average of the two inputs.
Sets the minimal size of the element for browser working in full-screen mode.
Sets the minimum and maximum sizes for a track.
What is the shorthand for the column-gap and row-gap properties?
gap-column-row
gutters
grid-gap
gap
What is the difference between an implicit and explicit grid?
Implicit grids use the grid-template-columns property while explicit grids use the grid-template-rows property.
Explicit grids use the grid-template-columns property while implicit grids use the grid-template-rows property.
Implicit grids use the grid-template-columns or grid-template-rows properties to create columns while rows and columns are automatically created in explicit grids.
Explicit grids use the grid-template-columns or grid-template-rows properties to create columns while rows and columns are automatically created in implicit grids.
Which of the following units represents a fraction of the space within the grid container?
fractional
frac
f
fr
What are grid lines?
Shorthand for rows and columns.
Outlines of a grid element.
Lines along which grid columns and rows are created.
Lines on which each of the grid items begin and end.
What does the grid-column property do?
Adds a new grid element as a child of the element it's applied to.
Aligns text in the grid item vertically.
Sets two columns for a grid container.
Tells the grid item on which grid line it should start and end at.
How do you create four columns of equal width?
grid-template-columns: repeat(4);
grid-template-columns: repeat(1, 4);
grid-template-columns: repeat(1fr, 4);
grid-template-columns: repeat(4, 1fr);
What does the grid-template-areas property do?
It is used to specify where the item begins on a line in the grid container.
It is used to create gaps between tracks in the container.
It is used to repeat sections in the track listing.
It is used to provide a name for the items you are going to position on the grid.
What does the grid-auto-flow property do?
Controls the order in which grid items are displayed.
Adjusts the spacing between the grid elements.
Automatically adjusts the element to fit in the grid.
Controls how auto-placed elements get inserted to the grid.
Which of the following is the correct way to use the grid-template-areas property?
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: set(
"header header"
"sidebar main"
"footer footer"
);
gap: 20px;
}
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: apply(
"header header"
"sidebar main"
"footer footer"
);
gap: 20px;
}
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: set-areas;
gap: 20px;
}
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 20px;
}
Which of the following is the correct way to work with the grid-auto-flow property?
.social-icons {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-flow: none;
grid-auto-columns: 1fr;
}
.social-icons {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-flow: allow;
grid-auto-columns: 1fr;
}
.social-icons {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-flow: set;
grid-auto-columns: 1fr;
}
.social-icons {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
Which of the following is NOT a valid grid property?
gap
grid-column
grid-template-columns
grid-set
Which of these properties can be used to center items inside a grid element?
allow-items
set-items
center-items
align-items
Which of the following is a correct value to use with the grid-auto-columns property?
grid-auto-columns: unset-grid;
grid-auto-columns: revert-grid;
grid-auto-columns: set-content(20%);
grid-auto-columns: 1fr;
What are grid tracks?
Shorthand for rows and columns.
Lines along which you can animate movement of the grid items.
Lines on which each of the grid items begins and ends.
Spaces between two adjacent grid lines.
Which of the following is the correct way to use the minmax() function?
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(apply);
}
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax();
}
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(set);
}
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(150px, auto);
}
How do you position a grid item within a layout defined by grid-template-areas?
By directly defining the item's size and location within the grid using grid-template-rows and grid-template-columns.
By using the grid-area property and specifying both row and column start and end positions.
By setting both grid-area and explicit pixel coordinates.
By assigning the named area to the item's grid-area property.
What does the grid-auto-rows property control?
The height of explicitly defined rows.
The maximum width of grid columns.
The spacing between rows.
The size of implicitly created rows.
Which property would you use to make a grid item span multiple rows?
grid-row-span
row-span
span-rows
grid-row
What defines an explicit grid?
Tracks created automatically to fit content.
Tracks defined by the fr unit.
Tracks added with grid-auto-flow.
Tracks explicitly set by grid-template-columns or grid-template-rows.
Which value for grid-auto-flow would make new items fill columns first?
row
vertical
row dense
column
What is the purpose of grid-template-areas?
To auto-generate implicit tracks.
To replace the fr unit.
To set z-index values.
To visually map items to named grid areas.
How can you make a grid item start at column line 2 and end at column line 4?
grid-column: 2 / span 4;
grid-column: start 2 / end 4;
grid-column: from 2 to 4;
grid-column: 2 / 4;
What is the effect of grid-template-columns: 1fr 2fr 1fr?
Creates three equal-width columns.
Makes the middle column three times as wide as the others.
Forces all columns to be exactly 1fr wide.
Creates three columns where the middle is twice as wide as the sides.
How would you create a grid with 3 equal columns and a 20px gap between them?
.container {
display: grid;
grid-template: repeat(3, 1fr) / 20px;
}
.container {
display: grid;
grid: 1fr 1fr 1fr / gap 20px;
}
.container {
display: grid;
grid-template-columns: 20px 1fr 1fr 1fr;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
What does repeat(3, minmax(100px, 1fr)) create?
Three columns that can't shrink below 100px.
Three fixed 100px columns.
Three rows with maximum height of 1fr.
Three columns that grow proportionally but won't shrink below 100px.
Which statement about implicit grids is true?
Implicit grids ignore the gap property.
Implicit tracks must be defined with grid-template-areas.
Implicit tracks can only be created using the grid-auto-flow property.
Implicit tracks are created when content doesn't fit explicit tracks.
What does the place-items property do in CSS Grid?
It sets the size of grid items automatically based on available space.
It controls the grid template's column and row definitions.
It adjusts the order of grid items within the container.
It is a shorthand for aligning grid items in both the block and inline axes.
What does this CSS accomplish?
.container {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Creates fixed 150px columns that overflow the container.
Creates columns that are exactly 1fr wide regardless of content.
Creates a maximum of one column per 150px of available width.
Creates flexible columns that are at least 150px and collapse when space is limited.
How can you create asymmetric grid layouts?
By using only fr units.
By mixing different length units in grid-template-columns.
By setting grid-asymmetric: true.
By defining different sizes for each track.
What does grid-column-start: 2 do to a grid item?
Makes it span 2 columns.
Offsets it by 2 pixels.
Positions it starting at the second vertical grid line.
Makes it start at the second column line.
Which property would you use to control overflow behavior in grid tracks?
grid-overflow
track-sizing
fit-content
minmax()
What will be the result for the following code?
.container {
display: grid;
grid-template-columns: 100px 1fr 2fr;
grid-template-rows: auto 150px;
gap: 10px;
}
The container will have three columns of equal width, and two rows with 150px height each.
The container will have three columns, all with 100px width, and two rows with 150px height.
The container will have two rows, each with a height of 1fr.
The container will have three columns: 100px, 1fr and 2fr wide and two rows: one auto and one with 150px height.
How would you make a grid item span all available rows?
grid-row: full;
grid-row: auto / -1;
grid-row: 1 / span infinite;
grid-row: 1 / -1;
Which property controls the alignment of grid items along the block axis?
justify-items
place-items
align-content
align-items
How can you ensure a grid item stays in the first column regardless of grid changes?
grid-column: fixed;
grid-column: first;
grid-lock: column;
grid-column: 1;