Responsive layouts Using CSS Grid

Responsive layouts Using CSS Grid | CSS3 Grid

Responsive list product card grid using css only

The channel is building 2 series: animation series with proejct and animation series for newbies

See more code HTML CSS javascript with Lun Dev.

Hướng dẩn chi tiết:

Truy cập youtube Lùn Dev để xem nhiều hơn

Code HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <input type="radio" name="grid" id="grid-1" value="1">
        <input type="radio" name="grid" id="grid-2" value="2">
        <input type="radio" name="grid" id="grid-3" value="3">
        <input type="radio" name="grid" id="grid-4" value="4" checked>

<div class="filterGrid">
            <label for="grid-1"><img src="grid1.png"></label>
            <label for="grid-2"><img src="grid2.png"></label>
            <label for="grid-3"><img src="grid3.png"></label>
            <label for="grid-4"><img src="grid4.png"></label>
        </div>
        <div class="list">
            <div class="item">
                <div class="img">
                    <img src="img1.png">
                </div>
                <div class="content">
                    <div class="category">Headphones</div>
                    <div class="title">Headphones ADE CSDF SDW 2022 - product limit</div>
                    <div class="price">
                        <span class="old">$23.02</span>
                        <span class="new">$20.02</span>
                    </div>
                    <button class="addCard">Add to card</button>
                </div>
            </div>

<div class="item">
                <div class="img">
                    <img src="img1.png">
                </div>
                <div class="content">
                    <div class="category">Headphones</div>
                    <div class="title">Headphones ADE CSDF SDW 2022 - product limit</div>
                    <div class="price">
                        <span class="old">$23.02</span>
                        <span class="new">$20.02</span>
                    </div>
                    <button class="addCard">Add to card</button>
                </div>
            </div>

</div>
    </div>
    
</body>
</html>

Code CSS

body{
    background-color: #f5f5f5;
    font-size: 15px;
    font-family: system-ui;
}
.container{
    width:1200px;
    margin:50px auto
}
.list{
    display: grid;
    grid-template-columns: auto auto auto auto;
}
.item{
    text-align: center;
    position: relative;
    background-color: #e5e5e5;
    padding:20px;
    margin:5px;
    opacity: 0;
}
.item .img{
    padding:10px;
    width:100%;
    text-align: center;
}
.item .img img{
    width:60%;
}
.content{
    letter-spacing: 1px;
    padding:20px;
    height: max-content;
}
.content .category{
    font-size: small;
    opacity: 0.7;
}
.content .title{
    font-size: 15px;
    font-weight: 600;
    margin-top:10px;
}
.content .price{
    margin-top:10px;
    font-size: 15px;
}
.content .price .old{
    opacity: .7;
    padding:0 10px;
}
.content .price .new{
    padding:0 10px;
    font-weight: 500;
}
.content .addCard{
    margin-top:10px;
    padding:10px 20px;
    background-color: #ECD0AD;
    border:none;
}
.filterGrid{
    text-align: right;
    margin-right: 5px;
}
.filterGrid label{
    margin: 0 0 5px;
    background-color: #e5e5e5;
    display: inline-block;
    padding:10px;
    width:70px;
    text-align: center;
}
.filterGrid label img{
    width:30px
}
input[name="grid"][value="1"]:checked ~ .list{
    grid-template-columns: auto;
}
input[name="grid"][value="2"]:checked ~ .list{
    grid-template-columns: auto auto;
}
input[name="grid"][value="3"]:checked ~ .list{
    grid-template-columns: auto auto auto;
}
input[name="grid"][value="4"]:checked ~ .list{
    grid-template-columns: auto auto auto auto;
}
input{
    display: none;
}

input[name="grid"][value="1"]:checked ~ .filterGrid label[for="grid-1"]{
    background-color: #ECD0AD;
}
input[name="grid"][value="2"]:checked ~ .filterGrid label[for="grid-2"]{
    background-color: #ECD0AD;
}input[name="grid"][value="3"]:checked ~ .filterGrid label[for="grid-3"]{
    background-color: #ECD0AD;
}input[name="grid"][value="4"]:checked ~ .filterGrid label[for="grid-4"]{
    background-color: #ECD0AD;
}
@keyframes effectChangeGrid{
    from{
        opacity: 0;
        transform: translate(0,10px);
    }to{
        opacity: 1;
        transform: translate(0,0);
    }
}
@keyframes effectChangeGrid2{
    from{
        opacity: 0;
        transform: translate(0,10px);
    }to{
        opacity: 1;
        transform: translate(0,0);
    }
}
@keyframes effectChangeGrid3{
    from{
        opacity: 0;
        transform: translate(0,10px);
    }to{
        opacity: 1;
        transform: translate(0,0);
    }
}
@keyframes effectChangeGrid4{
    from{
        opacity: 0;
        transform: translate(0,10px);
    }to{
        opacity: 1;
        transform: translate(0,0);
    }
}
input[name="grid"][value="1"]:checked ~ .list .item{
    animation:effectChangeGrid 1s ease-in-out 1 forwards
}
input[name="grid"][value="2"]:checked ~ .list .item{
    animation:effectChangeGrid2 1s ease-in-out 1 forwards
}
input[name="grid"][value="3"]:checked ~ .list .item{
    animation:effectChangeGrid3 1s ease-in-out 1 forwards
}
input[name="grid"][value="4"]:checked ~ .list .item{
    animation:effectChangeGrid4 1s ease-in-out 1 forwards
}
.item:nth-child(2){
    animation-delay: 0.2s!important;
}
.item:nth-child(3){
    animation-delay: 0.4s!important;
}
.item:nth-child(4){
    animation-delay: 0.6s!important;
}
.item:nth-child(5){
    animation-delay: 0.8s!important;
}
.item:nth-child(6){
    animation-delay: 1s!important;
}
.item:nth-child(7){
    animation-delay: 1.2s!important;
}
.item:nth-child(8){
    animation-delay: 1.4s!important;
}
input[name="grid"][value="1"]:checked ~ .list .item,
input[name="grid"][value="2"]:checked ~ .list .item{
    display: flex;
    text-align: left;
    align-items: center;
}
input[name="grid"][value="1"]:checked ~ .list .item .img{
    width:30%;
}

Hướng dẩn chi tiết:

Code HTML

Code CSS

Thank You

Contact Form