CSS Layout
inline-block
Edit this html file and add your CSS in the tasks.css file.
Task 1
Using inline-block construct a 2x2 grid with a 0.5em gutter.
Each grid item should contain one of the <div class="picure-holder" /> elements.
Task 2
Create a product grid that has:-
- An
0.5emgutter. - 1 products per row below by default
- 2 products per row on the
mediumviewport (520px) - 4 products per row on the
largeviewport (800px)
You can use the utility width classes u-1\4 ect. Add breakpoint modifiers to the classes for responsive widths u-1\4--large.
Use these great products!
Fried Egg
Fried to perfection.
Teapot
Teabags not included.
