Страница блога: посты с сеткой CSS - PullRequest
Новая
       3

Страница блога: посты с сеткой CSS

0 голосов
/ 26 марта 2020

Я начинаю учиться HTML и CSS. Я прошел курсы Уэса Бос по CSS, а также прочитал много страниц по css -трюкам и некоторым курсам для мастеров.

Я хочу применить то, что я изучил, к планированию Создание страницы блога приятным способом.

Вот фрагмент, содержащий основы. 

.blog__grid{
    display:grid;
    grid-template-columns: repeat(4,minmax(5vw,1fr));
    grid-auto-rows: auto;
    border:10px solid yellow;
    grid-gap:5px;
}

.blog__post{
    border:5px solid black;
    min-width: 24vw;
}

.blog__header{
    width: 5vw;
    height: 5vw;
    background-color: pink;
}
<html><head>
    <meta charset="utf-8">
    <title>Django design</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="static/main.css">
    
</head>

<body>
    <div class="blog__grid">
        <div class="blog__post">
            <div class="blog__header"></div>
            <p class="blog__content"> This is a somehow maybe interesting blog content for you and people that you may
                know that might be interested</p><p>
        </p></div>
        <div class="blog__post">
            <div class="blog__header"></div>
            <p class="blog__content"> This is a somehow maybe interesting blog content for you and people that you may
                know that might be interested</p><p>
        </p></div>
        <div class="blog__post">
            <div class="blog__header"></div>
            <p class="blog__content"> This is a somehow maybe interesting blog content for you and people that you may
                know that might be interested</p><p>
        </p></div>
        <div class="blog__post">
            <div class="blog__header"></div>
            <p class="blog__content"> This is a somehow maybe interesting blog content for you and people that you may
                know that might be interested</p><p>
        </p></div>
        <div class="blog__post">
            <div class="blog__header"></div>
            <p class="blog__content"> This is a somehow maybe interesting blog content for you and people that you may
                know that might be interested</p><p>
        </p></div>
        <div class="blog__post">
            <div class="blog__header"></div>
            <p class="blog__content"> This is a somehow maybe interesting blog content for you and people that you may
                know that might be interested</p><p>
        </p></div>
        <div class="blog__post">
            <div class="blog__header"></div>
            <p class="blog__content"> This is a somehow maybe interesting blog content for you and people that you may
                know that might be interested</p><p>
        </p></div>
        <div class="blog__post">
            <div class="blog__header"></div>
            <p class="blog__content"> This is a somehow maybe interesting blog content for you and people that you may
                know that might be interested</p><p>
        </p></div>
        <div class="blog__post">
            <div class="blog__header"></div>
            <p class="blog__content"> This is a somehow maybe interesting blog content for you and people that you may
                know that might be interested</p><p>
        </p></div>
        <div class="blog__post">
            <div class="blog__header"></div>
            <p class="blog__content"> This is a somehow maybe interesting blog content for you and people that you may
                know that might be interested</p><p>
        </p></div>
        <div class="blog__post">
            <div class="blog__header"></div>
            <p class="blog__content"> This is a somehow maybe interesting blog content for you and people that you may
                know that might be interested</p><p>
        </p></div>
        <div class="blog__post">
            <div class="blog__header"></div>
            <p class="blog__content"> This is a somehow maybe interesting blog content for you and people that you may
                know that might be interested</p><p>
        </p></div>
    </div>


</body></html>

Мне бы хотелось:

  • возможность создавать контейнеры блогов (.blog__post), которые отвечают правилу хорошего дизайна за их размер / соотношение сторон, будучи отзывчивым. Может быть, что-то вроде золотого сечения?
  • возможность иметь хороший "заголовок блога", представленный в моем примере цветными квадратами, который также имел бы хорошие размеры и соотношение сторон
  • , имея возможность иметь Контейнеры блогов, которые являются жидкостями и адаптируются к размеру области просмотра. так что в основном я хотел бы, чтобы сетка могла перемещать элементы сетки в следующую строку, как только они заканчиваются в колонках

Почему-то, я думаю, что-то упустил, потому что я никогда не сможет пометить все эти поля сразу. У меня может быть плавный дизайн, но затем я испортил соотношение сторон, поэтому я хотел бы, чтобы кто-то со стажем предоставил мне «учебный» способ достижения этого.

...