Jump to content

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


McLotos
 Share

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
Link to comment
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

Link to comment
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.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy