Верстка блоков CSS

Ребят вопрос есть. Вот всё в css понимаю, вроде не сложно, но у меня всегда возникает проблема с ширинами и высотами блоков в адаптиве и не только. То есть какую именно высоту или ширину нужно задавать то ли блоку то ли карточке товаров и тд., что бы все нормально отображалось и к примеру картинки не вылазили за рамки блока и растягивались по блоку как нужно... С этим большие проблемы. Вроде ничего сложного (стараюсь фикс ширины и высоты не задавать) и все равно блоки кривые и приходится костылями исправлять. Примеров где у меня проблемы с этим - валом. И карточки товаров и флекс контейнеры, и просто дивы и еще 1000 разных блоков. И кому какую ширину высоту задавать и как оно взаимодействует между собой я очень путаюсь. Сижу по 2-3 часа и не понимаю почему так криво. Собственно вопрос к вам, может есть видео на ютубе или тема которая посвящена именно моей проблеме и может это всё как то называется одной темой? К примеру блочная модель или... Огромная просьба помочь с материалом для изучения, желательно не древним.

По дате

По рейтингу

yulia_amake

Мудрец

1г

По размерам, адаптиву и сеткам, как и по верстке в целом какого-то универсального решения нет, всегда можно сделать один и тот же макет по-разному, и разные разрабы и преподы обычно по-разному и верстают. Легче разобрать на конкретных примерах. Можете написать мне и скинуть код на ревью, посмотрим, что у вас так, а что можно улучшить.

eshth_strhrtj

Гуру

1г

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

Чтобы расставить карточки товаров, для этого есть один простой универсальный рецепт. Здесь высота зада фиксированная, сделал специально т.к. не стал заполнять контентом.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
 
    <style> 
         
        .container { 
            max-width: 1000px; 
            margin: 0 auto; 
            padding: 0 30px; 
            border: 1px solid red; 
        } 
 
 
        .catalog { 
            display: flex; 
            flex-wrap: wrap; 
            justify-content: center; 
            gap: 30px; 
            margin-left: -15px; 
            margin-right: -15px; 
        } 
 
        .catalog__item { 
            width: calc(100% / 3 - 30px); 
            height: 300px; 
            background-color: crimson; 
        } 
 
        @media screen and (max-width: 900px) { 
            .catalog__item { 
                width: calc(100% / 2 - 30px); 
            } 
        } 
 
        @media screen and (max-width: 600px) { 
            .catalog__item { 
                width: calc(100% / 1 - 30px); 
            } 
        } 
 
    </style> 
</head> 
<body> 
 
 
<div class="container"> 
     
    <div class="catalog"> 
        <div class="catalog__item"></div> 
        <div class="catalog__item"></div> 
        <div class="catalog__item"></div> 
        <div class="catalog__item"></div> 
        <div class="catalog__item"></div> 
        <div class="catalog__item"></div> 
        <div class="catalog__item"></div> 
        <div class="catalog__item"></div> 
        <div class="catalog__item"></div> 
    </div> 
 
</div> 
 
</body> 
</html>

Пример может и не самый лучший, но он простой и универсальный, т.к. не требует доп оберток, карточки можно раставлять как угодно, по 2 в ряд, по 3, по 4 и т.д.

iurii_semykin

Искусственный Интеллект

1г

Вы упустили тему "относительных размеров". Задавайте все размеры в процентах, а не пикселях и не пунктах.

z9xsvoipgjphzyl

Искусственный Интеллект

1г

К примеру блочная модель

Это конструктор грид-ареалов любых конфигураций.. себе делал))
https://bulletproof-password.web.app/Grid Layout with Cell Spanning.html
В адаптиве тоже будет работать, просто заменяется шаблон, например уменьшается число колонок.

Лучше разобрать конкретный пример, где есть проблемы.

petr_alekseevich_1

Оракул

1г

Задавать минимальную или максимальную ширину и высоту для карточки. Чтобы элементы за ее пределами не вылезали, давать им максимальную ширину 100%. Картинкам авто-высоту, минимальную ширину и ширину 100%.
Карточки желательно в грид-сетку размещать и найти статью про grid-auto-flow, grid-auto-fill и т.д., очень полезная.
А вообще, ты говоришь "Примеров где у меня проблемы с этим - валом", а в чем сложность приложить 1-3 таких? Всяко проще конкретно указывать, где проблема, чем абстрактно в темноте шарить, в чем именно пробелы