香料 example

by rulin shyu

HTML

<main role="main">
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/alfalfa-seeds.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/allspice-ground.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/applepiespice.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/basil.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/bay-leaves.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/blackpepper.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/cardamom.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/celery-salt.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/chicken-flavor-broth-powder.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/chile-peppers-birdseye.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/chives.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/cider-mate-mulling.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/cumin.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/dill-seed.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/lavender-flowers.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/nutmeg-whole.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/oregano-leaf.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/peppermill.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/pizza-seasoning.jpg"></figure>
    <figure><img...

SCSS

main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}



// 以下是一些初始化

body,
figure {
    margin: 0;
}

img {
    display: block;
    width: 100%;
}