გამოიწერე YouTube-ის არხიyoutube white icon svg გამოწერა

ბლოგის ლისტის გვერდის დასრულება display:grid-ის დახმარებით

HTML, CSS-ის ინტენსიური კურსი

კურსის დასრულების შემდეგ შეძლებთ HTML CSS-ით ააწყოთ კომპლექსური ვებ გვერდები.

გაიგე მეტი

მოცემულ გაკვეთილში ვიყენებთ პრაქტიკაში display:grid-ს და fr საზომ ერთეულებს

HTML კოდი

<div class="container body-container blog-main-container">
    <!-- მთავარი კატეგორიების ბლოკები -->
    <a href="#" class="main-category-item">
        <img src="./assets/icons/globe.svg" alt="globe">
        <h3>მსოფლიო</h3>
    </a>
    ...
    ...
    ...
    <!-- ნავიგაციის ბლოკი -->
    <ul class="category-navigation-list">
        <!-- კატეგორიების ჩამონთვალი -->
        <li><a class="d-block" href="#">პოლიტიკა</a></li>
    </ul>
    <!-- ბლოგის ქარდების კონტეინერი -->
    <div class="blog-container">
        <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 კოდი

.blog-main-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}
.blog-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    grid-column: 2 / span 3;
}

კურსში შემავალი თემები

კომენტარები 0

საიტის აწყობა (ავტორიზაცია) საიტის აწყობა (რეგისტრაცია, პაროლის აღდგენა) საიტის აწყობა (header, nav, footer), ცოტა რამ display:flex-ზე საიტის აწყობა, როგორ მუშაობს CSS flexbox (display: flex;) საიტის აწყობა (ბლოგის გვერდი, ნაწილი #1) Git-ის დაყენება Windows-ზე Linux-ის ძირითადი ბრძანებები ვებ-დეველოპმენტისთვის CSS position property, ვისწავლოთ CSS პოზიციები ფონტების მიბმა საიტზე, როგორ მივაბათ ფონტები CSS @import and CSS variables, იმპორტი და ცვლადები CSS-ში html tables, ცოტა რამ ცხრილების შესახებ როგორ შევქმნათ და ავტვირთოთ პროექტი Git-ზე ბლოგის გვერდი #2, ვაწყობთ ქარდებს display: grid; თვისება, რომელიც აუცილებელია ვიცოდეთ display:grid-ის საზომი ერთეულები fr-ები (fractions) ბლოგის ლისტის გვერდის დასრულება display:grid-ის დახმარებით ბლოგის დეტალური გვერდის დასრულება კონტაქტის გვერდის დასრულება დახმარების გვერდის დასრულება საიტის აწყობა: ცოტა რეფაქტორინგი და ბოქსმოდელის განხილვა საიტის აწყობა: პირელი ნაბიჯები რესპონსივ დიზაინში საიტის აწყობა: რესპონსივი, მთავარი გვერდი საიტის აწყობა: მობილური ნავიგაცია როგორ გავასწოროთ HTML ელემენტი ცენტრში როგორ გავაკეთო dark theme