Sign in to follow this  
McLotos

Как заставить grid вести себя как нужно

Recommended Posts

Всем привет. Есть шаблон, который никак не могу заставить вести себя как нужно - в одной из секций шаблона есть 3 блока, которые всегда должны быть по центру страницы, но в какой-то момент они начинают прижиматься к левому краю экрана и остается много пустоты, подскажите как починить (при этом есть навязчивое желание не использовать @media

думаю код объяснит вопрос лучше, чем я

https://codepen.io/McLotos/pen/ExYWoQq?editors=1100

Если начать растягивать страницу по ширине, то в какой-то момент блоки просто приклеиваются к левому краю, а нужно чтобы все три блока, стоя рядом были точно по середине страницы

в качестве простого решения, можно добавить @media screen and (min-width: 50rem) и там указать что-то типа

main
  grid-template-columns: repeat(5, 1fr)
  section
    grid-column-start: 2
    grid-column-end: 4

но не хочется использовать @media-запросы, чтобы не возиться с подгонкой под разные экраны, смысл grid пропадает

Edited by McLotos

Share this post


Link to post
Share on other sites

I have solution

было

main
  section
    display: grid
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr))
    grid-gap: 2rem

стало

main
  section
    display: grid
    grid-template-columns: repeat(auto-fit, minmax(20rem, max-content))
    justify-content: center
    grid-gap: 2rem

Рабочий пример

https://codepen.io/McLotos/pen/ExYWoQq?editors=1100

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
Sign in to follow this  

  • Member Statistics

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

    No registered users viewing this page.