6강 - grid를 이용한 반응형 상품리스트

👀 테일윈드 반응형 브레이크 포인트 링크

<!-- 테일윈드 css 불러오기-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">

<section class="section_prod_list">
    <div class="container mx-auto">
        <!-- ul>li*20>a[href="#"]>img[src="https://picsum.photos/id/$/300/300"] -->
        <ul class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5">
            <li><a href="#"><img src="https://picsum.photos/id/1/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/2/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/3/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/4/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/5/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/6/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/7/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/8/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/9/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/10/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/11/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/12/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/13/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/14/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/15/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/16/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/17/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/18/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/19/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/20/300/300" alt=""></a></li>
        </ul>
    </div>
</section>

.section_prod_list > .container > ul > li > a {
    display: block;
}

.section_prod_list > .container > ul > li > a > img {
    width: 100%;
    display: block;
}

👀 코드펜으로 완성된 코드 보러가기