Jump to content
  • Sign Up
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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Member Statistics

    46,837
    Total Members
    1,451
    Most Online
    HARDSOFT
    Newest Member
    HARDSOFT
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...