alex_web64

Аналог flexbox верстки на grid

Recommended Posts

Здравствуйте.

Есть такой пример на флексах https://jsfiddle.net/dtns7L2v/ При уменьшении размера окна когда контент не помещается в одну строку он переносится на вторую. Но между элементами не плохо было бы добавить отступ. К примеру, с помощью внутренних полей и отрицательного отступа в родителя, как это сделано в бутстрапе.

Гриды нам предлагают отличное свойство grid-gap, которое может сделать подобное одной строкой кода. Проблема в том, что я не могу добиться подобного поведения элементов, из-за отсутствия опыта работы с этой новой технологией. Мои попытки:

- элементы имеют ширину по контенту, но не переносятся https://jsfiddle.net/dtns7L2v/1/.

- элементы переносятся, но ширину я выставил фиксированную, что не подходит https://jsfiddle.net/dtns7L2v/2/

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By four17
      Можно ли с помощью css выровнять блоки одинакового по уровню ? 
      вот картинка.
       
      Высота блока должна быть не фиксированной .Контент может быть  в любом количестве . Блоки с контентом должны быть на одном уровне .  Т.е независимо сколько символом в контенте , описание строго на одном уровнем с другим  описание  , цена на одном уровне с ценой.
      Каким способом можно реализовать данное решение ? спасибо за внимание.
    • By d0ublezer0
      zebra-tara.ru
      на главной странице есть блок с популярными товарами

      чтобы его организовать, мне пришлось делить список на две части. отдельно в своём контейнере выводится большой первый элемент и далее - остальные, тоже в flex контейнере
      можно добиться такого визуального представления как-то иначе (без разделения UL списка), когда первый элемент имеет большой размер?
      мне это потребуется, чтобы на малых разрешениях навесить на этот список owl carousel, а получается, что первый элемент оторван..
      Полагаю, это можно как-то решить с колонками, а не строками, но мне этот фокус не удался
  • Member Statistics

    46,436
    Total Members
    3,128
    Most Online
    bauka2288
    Newest Member
    bauka2288
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.