Ответы пользователя по тегу CSS Grid
  • Как сделать такой блок на grid?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    grid-template-columns: 1fr 1fr;, у тебя три колонки, а не две, должно быть: grid-template-columns: 1fr 1fr 1fr;, а лучше grid-template-columns: repeat(3, 1fr);, потому как если твоим шаблоном управляют вложенные элементы, то ты сам уже потерял контроль. А grid-column: 1/3 вот такую запись проще заменить на grid-column: 1/span 2;. Так наглядно будет видно, сколько занимает ячеек блок.
    Ответ написан
    Комментировать
  • Как изменить блок для адаптивной верстки?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Отрицательные отступы на размер внешних сделай.
    Ответ написан
    5 комментариев
  • Как задать адаптивную высоту блока-родителя?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Не указывай фиксированные размеры, если необходимо пройти проверку на переполнение. Указывай минимальный размер через min- свойство.
    Ответ написан
    Комментировать
  • Как задать grid поведение сетки как у masonry?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Lets d̶a̶n̶c̶e dense.
    Ответ написан
    Комментировать
  • Как убрать пробелы между блоками разной высоты,grid?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    https://codepen.io/i-am-studio_ru/pen/JjGPMKP

    и
    https://masonry.desandro.com/ (можно без гридов, можно на гридах: потребуется расчет на JS своими силами или можно найти скрипт)
    Ответ написан
  • Как заставить css grid не пропускать строки?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Переставлять элементы нельзя, они прилетают с бэка в неизвестном порядке.


    Прямо во время вывода и выводить их в свои места. Это явный двумерный массив. Который ты спокойно выведешь, как только поймешь, как с ним работать. Если быть точнее, двумерная проходка, к двумерному массиву можно и стоило бы привести для сортировки.

    Приведу грубый пример на псевдокоде:
    cols1 = []
    cols2 = []
    cols3 = []
    
    for(i = 0; i < x; i++) { // Где x = размер самого большого массива
    for(j = 0; j < 3; j++) { // Потому что колонок 3
    if j == 0:
         print(cols1[i])
    ...


    Естественно, надо предусмотреть пустые вхождения-заглушки, или заранее прописать классы для n+ элемента, чтобы они вставали в свою колонку, при это не фиксирую жестко их строку. Все элементарно.
    Ответ написан
    1 комментарий
  • Как в css создать адаптивный список в виде нескольких колонок?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Магии не существует, но ближайший к реализации вариант → columns. Но он не умеет подстраиваться под ширину текста, в отличие от гридов, зато умеет в вертикальное заполнение по колонкам.

    Так что тут одно из двух зол в общем-то. Или ждать еще лет 20, пока в спеке появится что-то подобное.
    Ответ написан
    Комментировать
  • Сбивается высота в css-grid при 1 fr?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Такое происходит, когда есть 2 и более блоков один за другим, где в одном есть контент, а в других размер эквивалентен в соответствии с правилом 1fr.

    Проверяй все свои правила начиная с этого, есть ли где пустой блок, который принимает размер содержащего контент.
    Ответ написан
  • Как выравнить flex или grid по ширине контейнера так чтобы нижние блоки сначала выравнивались?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Берешь отступ, который у тебя должен быть между тегами.
    2. Делишь его пополам.
    3. Делаешь обертке тегов отрицательный отступ сверху и снизу равный половине отступа между тегами.
    4. Реализуешь теги обычным flex-box без вые + flex-wrap:wrap.
    5. Задаешь тегам отступ вверх и вниз равный половине отступу между тегами.
    6. Всем остальным тегам задаешь отступ в право (не в лево) равный целому отступу между тегами.

    Ну детский сад же, ну. Никакой магии гриды и флексбоксы не приносят, всегда надо думать головой.
    Ответ написан
    Комментировать
  • Почему footer наезжает на контент при переключении галереи?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    5ea2215b850f1240515349.png

    Потому что гладиолус. Атрибуты занесены верно, но отключены по умолчанию.

    Да и в целом верстка дрянь. Помянем)
    Кроме подвала я нашел еще несколько критических багов в шапке, беду с респонсивом, кучу переопределений только в галерее и т.д. Такое с натяжкой допустимо начинающему во время разработки проекта или когда балуешься на своем.

    К слову, обращение с большой буквы на вы употребляется в личном общении, а не обезличенном со страницы сайта. В подвале «Либо Вы можете».
    Ответ написан
    2 комментария
  • Возможно ли реализовать такое с помощью гридов?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Присыпать немного JS и все бует окей. Может быть даже тебе поможет masonry. Хотя ему абсолютно насрать на то, какой у тебя метод позиционирования элементов, он сделает их абсолютным. Так что лучше свой алгоритм набросать.

    В CSS помогут только селекторы. Но там ты сможешь реализовать только логику типа «каждый n элемент делать две строки». Ну и придется посидеть посчитать, под какие разрешения какие условия загонять. Что реально, но немного геморрно на самом деле.
    Ответ написан
    Комментировать
  • Как сделать такое расположение элементов?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    .parent {
    grid-template-columns : repeat(6, 1fr)
    ... }
    .child { /*всем*/
    grid-column-end: span 2
    ... }
    .child { /*последним двум*/
    grid-column-end: span 3
    ... }


    Но вообще grid пока еще не совместимы с ослом. Я бы воздержался их использовать, если ты не клал болт на поддержку IE.
    Ответ написан
    Комментировать
  • Как сделать сетку grid как на рисунке?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    просто я пробую делать сетку, у меня полечается 4- элемента, а как сделать чтобы слева который большой элемент был один в стоблик?


    Задавай ему «пожирание»: grid-row: 1 / span 2. Ну а вообще ознакомься со спецификацией, ибо вопрос на уровне «первый раз услышал и не думал поискать сам».
    Ответ написан
    Комментировать
  • Masonry и flexbox?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Не умеет, при некоторых манипуляциях это может сделать grid, но для автоматического расчета все же есть смысле использовать кирпичную кладку.
    Ответ написан
    Комментировать
  • Пора-ли использовать css grid?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Индикатором я думаю, стоит брать, когда сабгриды выйдут в релиз.

    Впрочем я противник поддержки IE исключительно в угоду IE, поэтому давно уже активно использую гриды.
    Ответ написан
    Комментировать