CSS Flexbox and Grid Quiz

1. What is the main difference between CSS Flexbox and CSS Grid?

• Flexbox can arrange items in 3 dimensions, while Grid is in 2 dimensions.
• Flexbox is mainly for 1-dimensional layouts, while Grid is for 2-dimensional layouts.
• Flexbox uses fixed sizes, while Grid can resize elements freely.
• Flexbox requires more code, while Grid simplifies layout management.

2. Which property is used to align items in a flex container?

• flex-wrap
• justify-content
• grid-template
• align-content

3. How do you make all the flex items in a single row equal in width?

• Apply `flex-shrink: none` on each item
• Use `flex-grow: 0` on each item
• Use `flex-basis: 0` and `flex-grow: 1` on each item
• Set a fixed width for each item in pixels

4. Which property cannot be used with negative values in Flexbox?

• flex-basis
• flex-direction
• flex-grow
• flex-shrink

5. What is the default value of the `flex-shrink` property?

• 2
• 0
• -1
• 1

6. How do you make all the grid rows equal in height?

• Use `grid-auto-rows: 100%` or set a specific height for each row.
• Use `flex-grow: 1` on each item.
• Use `display: block` for each item.
• Use `padding: 10px` for each row.

7. Which of the following is an invalid property in Flexbox?

• flex-shrink
• flex-wrap
• flex-column
• flex-basis

8. What is the default value of the `grid-auto-flow` property?

• row
• column
• hidden
• auto

9. How do you place a grid item inside a named area?

• Use the `grid-position` property to place a grid item inside a named area
• Use the `grid-area` property to place a grid item inside a named area
• Use the `grid-item` property to place a grid item inside a named area
• Use the `place-item` property to place a grid item inside a named area

10. What is the effect of setting `grid-auto-flow: column`?

• New items will be placed to fill new columns
• New items will be placed outside the grid
• New items will overlap existing items
• New items will be placed in a random order

11. Does the order property apply to both flex items and grid items?

• Yes, the `order` property applies to both flex items and grid items.
• Yes, but only for flex items.
• No, the `order` property applies only to grid items.
• No, the `order` property is not used in CSS Grid.

12. How do you make the first letter of every paragraph red?

• Use `p::first-letter { color: red; }`
• Use `p:first-letter { color: blue; }`
• Use `p::first-letter { background: yellow; }`
• Use `p::letter { color: red; }`

13. How would you make the vertical gap between two elements 2rem?

• Use `gap: 2rem;`
• Use `padding: 2rem;`
• Use `border-spacing: 2rem;`
• Use `margin-bottom: 2rem;` and `margin-top: 2rem;`

14. What is the rem unit based on?

• The font-size of the root element of the page
• The height of the user screen
• The size of the nearest parent element
• The width of the viewport

15. Which property is used to specify the z-order of overlapping elements?

• position
• z-index
• margin
• display

16. How do you change the color of an SVG using CSS?

• Use `fill` to set the color inside the object and `stroke` to set the color of the border.
• Use `background-color` to modify the SVG`s appearance.
• Use `color` to change the SVG element`s fill and border.
• Use `opacity` to change the color of the SVG object.

17. When using position: fixed, what will the element be positioned relative to?

• Nearest positioned ancestor
• Parent element
• Document body
• Viewport

18. What will be the widths of three columns defined in a grid?

• The first column will be 40px, the second will be 120px, and the third will be 240px.
• The first column will be 60px, the second will be 150px, and the third will be 280px.
• The first column will be 100px, the second will be 200px, third will be 300px.
• The first column will have a width of 50px, the second column will be 150px wide, and the third column will be 300px wide.

19. Which property is used to display flex items in a column?

• flex-flow: column
• align-items: column
• flex-direction: column
• display: column

20. How do you make a block element have rounded corners?

• Use `margin: 10px`
• Use `padding: 10px`
• Use `border-radius: 10px`
• Use `outline: 10px`

21. What is the effect of setting `grid-auto-flow` to row?

• New items will be placed to fill new columns
• New items will be placed to fill new rows
• New items will be stacked on top of each other
• New items will be overlapped on existing rows

22. How do you align a global navigation bar to stay fixed at the top of the page?

• Use `position: relative; top: 0;`
• Use `margin-top: 0; position: absolute;`
• Use `display: block; top: 0;`
• Use `position: fixed; top: 0; width: 100%;`

23. What is the effect of setting `grid-auto-flow` to column?

• New items will overlap existing items
• New items will be placed in new rows
• New items will be hidden from view
• New items will be placed to fill new columns

24. How do you make the height of all grid rows equal using CSS Grid?

• Use `align-items: stretch` to make the heights equal.
• Use `grid-template-rows: auto` to define the height.
• Use `grid-row-gap: 10px` for equal heights.
• Use `grid-auto-rows: repeat(2, 100%)` or set a specific height for each row.

25. What is the effect of setting `grid-auto-flow` to row with four boxes already inside the grid?

• The fifth box will overlap with the fourth box in the same space.
• The fifth box will be placed in the implicit grid area and its width will be determined by the grid-auto-columns property.
• The fifth box will be ignored and not placed in the grid.
• The fifth box will be placed in the same row as the existing boxes.

26. How do you make all the flex items in a single row equal in width using Flexbox?

• Apply `margin: auto` on each item.
• Use `flex-basis: 0` and `flex-grow: 1` on each item.
• Set all items to `display: block`.
• Change the `flex-direction` to `column`.

27. What is the default value of the `flex-shrink` property in Flexbox?

• -1
• 2
• 1
• 0

28. How do you make all the grid rows equal in height using CSS Grid?

• Set `grid-template-columns: auto`
• Apply `display: flex` on the grid
• Use `grid-auto-rows: repeat(2, 100%)`
• Use `align-items: stretch` property

29. What is the effect of setting `grid-auto-flow` to column with four boxes already inside the grid?

• The fifth box will overflow outside the grid.
• The fifth box will stack horizontally.
• The fifth box will be placed in the implicit grid area and its width will be determined by the grid-auto-columns property.
• The fifth box will disappear from the layout.

30. How do you place a grid item inside a named area using CSS Grid?

• Use the `grid-item` property to place a grid item inside a named area.
• Use the `grid-area` property to place a grid item inside a named area.
• Use the `grid-position` property to place a grid item inside a named area.
• Use the `grid-location` property to place a grid item inside a named area.