MCQs Of Class 16: Grid Layout - Part 1
1. Which property is used to define the number of columns in a CSS Grid Layout?
- a)
grid-template-rows - b)
grid-template-columns - c)
grid-template - d)
grid-gap
Explanation: The correct answer is b. The grid-template-columns property defines the number of columns in a grid layout.
2. What does the gap property in CSS Grid do?
- a) It adds padding inside grid items.
- b) It creates space between rows and columns in the grid.
- c) It sets the margin of the grid container.
- d) It adjusts the height of grid rows.
Explanation: The correct answer is b. The gap property defines the space between grid items, both horizontally and vertically.
3. How do you create a 3-column grid with equal widths using CSS Grid?
- a)
grid-template-columns: 3fr; - b)
grid-template-columns: 1fr 1fr 1fr; - c)
grid-template-columns: 33%; - d)
grid-template-columns: auto;
Explanation: The correct answer is b. Using grid-template-columns: 1fr 1fr 1fr; creates a 3-column grid with equal widths.
4. Which of the following grid properties is used to define the placement of grid items?
- a)
grid-template-columns - b)
grid-template-areas - c)
grid-column - d)
grid-gap
Explanation: The correct answer is c. The grid-column property is used to place grid items in specific columns.
5. What does the auto-fill value do in a CSS Grid layout?
- a) It creates a fixed number of columns.
- b) It fills the available space with as many columns as possible.
- c) It adds auto-margin between columns.
- d) It adjusts the width of the grid items.
Explanation: The correct answer is b. The auto-fill value automatically fills the container with as many columns as possible based on the available space.
6. How do you make a grid responsive using CSS?
- a) By setting a fixed width for grid columns.
- b) By using the
@mediaquery to adjust the grid layout based on screen size. - c) By using
grid-template-areas. - d) By using
flexboxinstead of grid.
Explanation: The correct answer is b. The @media query can be used to make a grid responsive by changing the layout based on the screen size.
7. Which property is used to define the size of grid items in a CSS Grid layout?
- a)
grid-item-size - b)
grid-template-columns - c)
grid-auto-rows - d)
grid-template
Explanation: The correct answer is b. The grid-template-columns property defines the size of columns, indirectly affecting grid items.
8. What does the minmax() function do in a CSS Grid layout?
- a) It defines the minimum and maximum number of columns.
- b) It sets the minimum and maximum size for grid items.
- c) It defines the minimum and maximum space between grid items.
- d) It defines the minimum and maximum rows in a grid.
Explanation: The correct answer is b. The minmax() function is used to set the minimum and maximum size for grid items, allowing responsive layouts.
9. How do you center grid items both horizontally and vertically?
- a)
align-items: center; - b)
justify-items: center; - c)
place-items: center; - d)
grid-align: center;
Explanation: The correct answer is c. The place-items: center; property centers grid items both horizontally and vertically.
10. Which of the following is used to create a grid item that spans multiple columns?
- a)
grid-column-start - b)
grid-column-end - c)
grid-column - d) All of the above
Explanation: The correct answer is d. All of the properties (grid-column-start, grid-column-end, and grid-column) can be used to span grid items across multiple columns.
11. What is the purpose of grid-template-areas in CSS Grid?
- a) It defines the names of rows in a grid.
- b) It helps place grid items by referring to named areas.
- c) It sets the size of grid items.
- d) It creates a flexible grid with an equal number of columns.
Explanation: The correct answer is b. The grid-template-areas property defines named areas in the grid that can be used to place grid items.
12. Which of the following properties is used to define the gap between rows in CSS Grid?
- a)
grid-row-gap - b)
row-gap - c)
gap - d)
grid-template-rows
Explanation: The correct answer is b. The row-gap property defines the space between rows in a grid layout.
13. Which of the following values can be used to define columns in a grid?
- a)
px - b)
fr - c)
em - d) All of the above
Explanation: The correct answer is d. You can define columns in a grid using different units like px, fr, and em.
14. How can you create a grid with 3 columns, where each column takes up an equal portion of the available space?
- a)
grid-template-columns: 1fr 1fr 1fr; - b)
grid-template-columns: 3fr; - c)
grid-template-columns: 33%; - d)
grid-template-columns: 100%;
Explanation: The correct answer is a. The property grid-template-columns: 1fr 1fr 1fr; creates a 3-column layout where each column occupies an equal portion of the available space.
15. What happens if you apply the grid-template-columns: 100px auto;?
- a) The first column is 100px wide, and the second column takes up the remaining space.
- b) Both columns will be 100px wide.
- c) The first column will take up the remaining space, and the second will be 100px wide.
- d) It will create 2 equal-width columns.
Explanation: The correct answer is a. The first column is fixed at 100px, and the second column will take up the remaining space.
16. Which of the following CSS Grid properties can be used to adjust the position of a grid item within a grid?
- a)
grid-row-start - b)
grid-column-start - c)
grid-row-end - d) All of the above
Explanation: The correct answer is d. All of these properties (grid-row-start, grid-column-start, and grid-row-end) adjust the position of grid items.
17. What is the default value of grid-template-columns in a grid layout?
- a)
none - b)
auto - c)
1fr - d)
100%
Explanation: The correct answer is b. By default, grid-template-columns is set to auto, meaning the columns will automatically adjust based on content size.
18. How would you create a grid where each column takes up an equal amount of space using minmax()?
- a)
grid-template-columns: repeat(3, minmax(100px, 1fr)); - b)
grid-template-columns: minmax(1fr, 1fr); - c)
grid-template-columns: minmax(200px, 1fr); - d)
grid-template-columns: repeat(3, minmax(150px, 1fr));
Explanation: The correct answer is a. minmax(100px, 1fr) ensures that each column will have a minimum width of 100px and a maximum width of 1 fractional unit.
19. What does the grid-template-rows: 100px 200px; property do?
- a) Creates a grid with two rows, where the first is 100px tall and the second is 200px tall.
- b) Creates a grid with one row that is 100px tall.
- c) Creates a grid with two equal-height rows.
- d) It defines the number of rows.
Explanation: The correct answer is a. The property defines a grid with two rows where the first is 100px and the second is 200px tall.
20. Which CSS property allows you to place a grid item starting at a specific row and column?
- a)
grid-row-startandgrid-column-start - b)
grid-template - c)
grid-template-areas - d)
grid-template-columns
Explanation: The correct answer is a. The grid-row-start and grid-column-start properties allow you to define where a grid item should start.
21. What does the grid-auto-flow property control in CSS Grid?
- a) It defines the flow of grid items in the layout.
- b) It defines how grid rows are created.
- c) It sets the size of grid items.
- d) It sets the spacing between rows.
Explanation: The correct answer is a. The grid-auto-flow property controls the flow of grid items, determining how items are placed within the grid.
22. How do you create a grid with 4 rows of equal height?
- a)
grid-template-rows: repeat(4, 1fr); - b)
grid-template-rows: auto; - c)
grid-template-rows: 4fr; - d)
grid-template-rows: 25%;
Explanation: The correct answer is a. grid-template-rows: repeat(4, 1fr); creates a grid with 4 equal-height rows.
23. What value does the grid-column property accept to span items across columns?
- a)
grid-column: 1 / 3; - b)
grid-column: span 2; - c)
grid-column: 2 / 4; - d) All of the above
Explanation: The correct answer is d. All options use the grid-column property to define how grid items span across columns.
24. What does the grid-template-columns: 200px 1fr 200px; rule define?
- a) Three columns with equal widths.
- b) Three columns, where the first and last are 200px wide, and the middle column takes up the remaining space.
- c) One large column with two smaller ones.
- d) A single column with 200px width.
Explanation: The correct answer is b. The first and last columns are 200px, and the middle column takes up the remaining space.
25. Which property is used to control the alignment of grid items in the cross-axis direction?
- a)
align-items - b)
justify-items - c)
align-content - d)
justify-content
Explanation: The correct answer is a. The align-items property controls the alignment of grid items along the cross-axis (vertical in most cases).
26. How can you create a responsive grid where columns automatically adjust based on the screen size?
- a) Use fixed width for columns.
- b) Use
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));. - c) Use
flexboxinstead of grid. - d) Use
grid-auto-rowsfor column adjustment.
Explanation: The correct answer is b. The repeat(auto-fill, minmax(200px, 1fr)) creates a responsive grid where columns adjust based on the container width.
27. Which property in CSS Grid allows items to span multiple rows?
- a)
grid-row-start - b)
grid-row-end - c)
grid-row - d) All of the above
Explanation: The correct answer is d. All these properties can be used to control how grid items span across rows.
28. Which of the following is the default value for grid-auto-rows in CSS Grid?
- a)
auto - b)
1fr - c)
0 - d)
100%
Explanation: The correct answer is a. By default, grid-auto-rows is set to auto, meaning the row height will automatically adjust based on content size.
29. How do you create a grid where items automatically fill in available space but have a minimum width of 100px?
- a)
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); - b)
grid-template-columns: 100px; - c)
grid-template-columns: repeat(auto-fill, 100px); - d)
grid-template-columns: minmax(100px, auto);
Explanation: The correct answer is a. The repeat(auto-fill, minmax(100px, 1fr)) ensures the items fill the space and have a minimum width of 100px.
30. Which CSS property is used to define the number of rows in a grid layout?
- a)
grid-template-columns - b)
grid-template-areas - c)
grid-template-rows - d)
grid-auto-rows
Explanation: The correct answer is c. The grid-template-rows property is used to define the size of grid rows.
31. What is the purpose of the grid-auto-flow property in CSS Grid?
- a) To determine how the grid items are placed in the grid.
- b) To control the size of grid items.
- c) To set the default number of columns.
- d) To create a flexible grid with fractional units.
Explanation: The correct answer is a. The grid-auto-flow property controls how grid items are placed within the grid.
32. How do you create a 2-column grid layout with one column 300px wide and the other taking up the remaining space?
- a)
grid-template-columns: 300px 1fr; - b)
grid-template-columns: 1fr 300px; - c)
grid-template-columns: 1fr 1fr; - d)
grid-template-columns: 300px auto;
Explanation: The correct answer is a. The first column is fixed at 300px, and the second column will take up the remaining space.
33. Which of the following CSS Grid properties controls the position of grid items along the main axis (horizontal)?
- a)
justify-items - b)
align-items - c)
justify-content - d)
align-content
Explanation: The correct answer is a. The justify-items property aligns grid items along the main axis (horizontal).
34. What does the grid-auto-columns property do?
- a) Defines the width of columns in the grid.
- b) Defines the number of columns.
- c) Automatically creates columns based on content.
- d) Automatically creates rows based on content.
Explanation: The correct answer is a. The grid-auto-columns property defines the size of columns that are auto-created when content overflows.
35. Which of the following is used to center a grid container on the page?
- a)
align-content: center; - b)
justify-content: center; - c)
place-content: center; - d)
grid-template-columns: center;
Explanation: The correct answer is c. The place-content: center; property centers the grid container both horizontally and vertically.
36. What value of grid-auto-flow ensures that grid items are placed in rows first and then columns if space is available?
- a)
row - b)
column - c)
dense - d)
row dense
Explanation: The correct answer is a. The row value places grid items row by row, filling available space.
37. Which of the following defines the relationship between grid items and grid lines in CSS Grid?
- a)
grid-template-areas - b)
grid-auto-rows - c)
grid-column - d)
grid-gap
Explanation: The correct answer is c. The grid-column property defines how grid items span between grid lines.
38. What is the default behavior of the grid-auto-flow property?
- a)
row - b)
column - c)
dense - d)
auto
Explanation: The correct answer is a. By default, the grid-auto-flow property is set to row, placing items in rows.
39. Which of the following CSS Grid properties can be used to set the height of a row in a grid layout?
- a)
grid-template-rows - b)
grid-auto-rows - c)
grid-row - d) Both a and b
Explanation: The correct answer is d. Both grid-template-rows and grid-auto-rows are used to control the height of rows in a grid layout.
40. Which of the following is the correct syntax to create a grid with 3 rows of 100px, 200px, and 300px heights respectively?
- a)
grid-template-rows: 100px 200px 300px; - b)
grid-template-rows: 1fr 1fr 1fr; - c)
grid-template-rows: repeat(3, auto); - d)
grid-template-rows: 100% 200% 300%;
Explanation: The correct answer is a. grid-template-rows: 100px 200px 300px; defines the exact heights for each row.
41. How do you create a responsive grid where columns adjust based on the available width?
- a) Use
grid-template-columns: 1fr; - b) Use
grid-template-columns: auto; - c) Use
grid-template-columns: repeat(auto-fill, 1fr); - d) Use
grid-template-columns: 100px;
Explanation: The correct answer is c. The repeat(auto-fill, 1fr) makes the grid responsive by filling columns based on available space.
42. Which of the following values can the grid-template-columns property accept?
- a) Fixed values like
pxandem - b) Fractional units like
fr - c) Percentage values
- d) All of the above
Explanation: The correct answer is d. The grid-template-columns property can accept fixed values (px), fractional units (fr), and percentage values.
43. Which CSS property allows items to automatically fill a grid container without exceeding the container's size?
- a)
grid-auto-flow - b)
grid-template-columns - c)
grid-column - d)
grid-template-areas
Explanation: The correct answer is a. The grid-auto-flow property can automatically place grid items into a grid container.
44. Which of the following CSS properties is used to control the overall size of the grid container?
- a)
grid-template-columns - b)
grid-template-areas - c)
grid-auto-columns - d)
grid-template
Explanation: The correct answer is d. The grid-template property is used to define both rows and columns and control the size of the grid container.
45. Which CSS property is used to control the positioning of items in a grid container?
- a)
align-items - b)
justify-items - c)
grid-template - d)
grid-auto-rows
Explanation: The correct answer is b. The justify-items property controls the horizontal positioning of grid items in a grid container.
46. What does the place-items property do in CSS Grid?
- a) It controls the positioning of items both vertically and horizontally.
- b) It defines how grid lines are placed.
- c) It controls the size of the grid container.
- d) It sets the size of grid items.
Explanation: The correct answer is a. The place-items property combines align-items and justify-items to position grid items both vertically and horizontally.
47. How do you create a grid where items span two columns and two rows?
- a)
grid-column: 1 / 3; grid-row: 1 / 3; - b)
grid-column: span 2; grid-row: span 2; - c)
grid-column: 1 / 3; grid-row: span 2; - d) Both a and b
Explanation: The correct answer is d. Both grid-column: 1 / 3; grid-row: 1 / 3; and grid-column: span 2; grid-row: span 2; will span the grid items across two columns and two rows.
48. Which of the following CSS properties can be used to define grid item areas in CSS Grid?
- a)
grid-template-columns - b)
grid-template-areas - c)
grid-template-rows - d)
grid-template
Explanation: The correct answer is b. The grid-template-areas property is used to define named grid areas, allowing easier placement of items.
49. What value of grid-auto-flow ensures that items fill available columns first, then move to the next row?
- a)
column - b)
row - c)
dense - d)
auto
Explanation: The correct answer is a. The column value places items in columns first, then moves to the next row.
50. What is the default value for the grid-template-columns property when no value is set?
- a)
auto - b)
1fr - c)
100% - d)
0
Explanation: The correct answer is b. By default, grid-template-columns is set to 1fr, meaning columns take equal space within the grid.
No comments:
Post a Comment