You're designing a photo gallery using a grid layout. Each row should display three images. The middle image in each row should be twice as large as the images on its sides. How would you achieve this?
- Use grid-template-areas property.
- Apply grid-row: span 2 to the middle image.
- Use grid-template-columns with explicit column sizes.
- Set grid-auto-flow: dense.
To achieve this layout, you should apply grid-row: span 2 to the middle image. This CSS rule will make the middle image span two rows, making it twice as large as the other images in the row.
Loading...
Related Quiz
- You want to design a heartbeat animation where a heart icon grows and shrinks continuously. How would you ensure the animation runs smoothly in both directions?
- What does the CSS rule "ul > li" specifically target?
- When specifying the width of an element in CSS, what does the unit vw stand for?
- How can you reverse the order of flex items?
- Which CSS property is used to set the font family for an element?