UI-компоненты №17. Создание карточек с прижатием кнопки внизу 

Работаю стажером фронтендером. Этот канал для меня как шпаргалка. Если что-то непонятно - сразу иду на maxgraph. Только качественный контент, ничего лишнего. Смотрю, запоминаю - потом сразу применяю на своих проектах. Учусь у профессионалов.

Спасибо. Ходим видеть ваше видео чаще.

Я делаю иначе. Берется высота кнопки, сколько-то пикселей, делается паддинг снизу у контейнера с контентом внутри карточки, равный высоте кнопки, и далее абсолютным позиционированием прилепляем кнопку через left 0 и bottom 0 к нижней части этого контейнера. И вуаля, все кнопки в карточках на одном уровне, независимо от количества текста в описании. Но предложенный способ тоже оч нравится, спасибо, Макс.

Максим, спасибо за ваш труд. Все понятно и очень круто! Очень рада, что я нашла ваш канал.

Как долго я искал как это сделать ! Спасибо тебе и твоему труду! )😉😉

Максим, огромная Вам благодарность за труды😊😊😊

Спасибо большое Максим, очень помогло. Ломал голову в процессе обучения. Теперь разобрался.

Как всегда просто и понятно! Спасибо большое!

Спасибо за полезное видео . Я долго бился 🥵 с такой задачей, чтобы получить нужный результат.

Максим , спасибо , на вашем канале можно стать мидлом после просмотра всех видео

Реально спасибо, опыт есть , даже при просмотре видео даже проговаривал что блин это же понятно, но все же один момент из этого вынес, видео очень годное, еще раз спасибо))

Блин, Макс, ты мой stackoverflow чес слово😄 спасибо!

😎 ща свои карточки переделаю 😂👌

Спасибо Вам большое! 👍

Спасибо, очень полезно 👍

Спасибо за контент, топ! Один вопрос, потенциальные карточки на втором ряду будут растягиватся на туже высоту как и самая большая с первого ряда даже если в них самих контента меньше? Спасибо!

Было информативно. Макс, ваши видео интересные и полезные!

спасибо, интересное решение! можно попросить сделать ролик как адаптировать видео html5 в попапе.

Класс!

Привет. Спасибо большое за подачу материала. Начал пару месяцев тому всего. Немного не в тему, но подскажи, плиз - когда будет натяжка по тому марафону строительного сайта? Честно - взял твои странички за основу, написал сайт на три странички для вывода новостей одной организации (они сами хотят постить типа блоги), начал смотреть видео о той же Winter CMS (ранее она, вроде как, была October CMS), и почти совсем не понятны некоторые моменты. Ясно, что нужен какой-то либо бэк, либо база. И не совсем понятно - как первые три новости будут отображаться на главной (из них последняя крупнее), а остальные скрываться в список. Ну и по поводу хостинга - есть хостинг, но немного не понял - заливать на хостинг нужно после натяжки или до? А то там только WP да пару таких типа Joomla. И, я так понял (или не понял), что ставить какие-то другие CMS они не хотят. Хотя сам хостинг неплохой. Заранее большое спасибо. P.S. Начитался про всякие фреймворки. Тебе отдельный респект, что пишешь просто на чистом HTML, CSS, JS. Тоже так хочу научиться..

Как сделать 5 карточек в одной линии горизонтально, и 4 линии на другой строке, чтобы они прилегали в началу?

display: flex; flex-direction: column; и тексту, который перед кнопкой flex: 1 1 auto;

а календарь является ui-компонентом?🙃 очень интересно было бы посмотреть на создание кастомного календаря с выбором диапазона дат, текущей датой и т.д. без всяких библиотек и фреймворков. только js, только хардкор😎

Здравствуйте! Как сделать растущую карточку при добавлении текста, если ее высота сдерживается гридом и еще по пиксель перфекту все должно быть четко?

Подскажите, была уже натяжка на Winter CMS адаптивного сайта "CreateX"? Чет не нахожу в видосах.

card__item flex-grow: 1 card display: flex flex-direction : column card__btn margin-top: auto card__item card height 100% 🎉

"..и в чем основная ошибка тех, кто делает эту часть...они просто берут и делают. Давайте тоже сделаем эту часть"(с) )))

Здравствуйте, а подскажите как быть если эти карточки должны быть слайдерами? Я пыталась внутри swiper wraper сделать список, а slide обернуть вместо div сделать li, но тогда слайдер перестал работать. Подскажите как быть?

Есть какие то особенности работы этого метода в свайпере? Просто у слайдов по умолчанию высота 100%, но в девтулс, если дать видимость границам слайдов, то у слайда с меньшим контентом (хоть и высота 100%) высота меньше других. И flex grow и margin auto не дают эффекта

а если заголовок в одной из карточек" извергающий вулкан будет в 2 строки?

А как быть если у тебя и заголовок может быть больше или ниже текста есть еще один блок и тоже разноразмерный?)

А ведь было бы лучше задать карточке не margin-right, а flex-gap. Тогда бы верстка более "резиновая была". И ширину не фиксированную 350пкс а в процентах, что ли. В плане адаптива ведь лучше? И если уже более профессионально верстать, то неплохо бы задать card__title text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; Чтобы если слишком длинное название было то автоматически срезалось

а если заголовок карточки будет больше, чем одна строка?

Лучше img не в div обернуть, а в figure

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