ბლოგის დეტალური გვერდის დასრულება

მოცემულ ვიდეოში ვასრულებთ ბლოგის დეტალურ გვერდს, რომლის დროსაც ვიყენებთ display:grid თვისებას

HTML კოდი

<div class="container blog-detail">
    <img class="main-img" src="./assets/img/card-img.jpg" alt="ბლოგის სათაური">
    <h1>ჩვენი სტატიის პირველი სათაური</h1>
    <p>დეტალური აღწერა ...</p>
    <p>დეტალური აღწერა ...</p>
    <div class="similar-container">
        <h2>მსგავსი სტატიტები</h2>
        <div class="card">
            <div class="img-container">
                <img class="card-img" src="./assets/img/card-img.jpg" alt="ჩვენი პრიველი სტატია">
                <img class="fav-img" src="./assets/icons/heart.svg" alt="ფავორიტებში დამატების იქონი">
                <span>12/01/2022</span>
            </div>
            <div class="card-body">
                <h3>სტატიის ჩვენებური სათაური</h3>
                <p>
                    ქარდის აღწერა
                </p>
                <div class="action-container">
                    <button class="btn">მეტი...</button>
                    <div>
                        <img src="./assets/icons/share.svg" alt="გაზიარება">
                    </div>
                </div>
            </div>
        </div>
        ...
        ...
        ...
    </div>
</div>

CSS კოდი

.container.blog-detail .main-img {
    width: 100%;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.container.blog-detail .similar-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.container.blog-detail .similar-container h2 {
    grid-column: 1 / span 4;
}