Блог

Я хотел бы знать, есть ли способ ограничить размеры сетки (не элемента, к которому она применяется, а самой сетки). Я объясняю :

Допустим, у нас есть нижний колонтитул с темным фоном, занимающий всю ширину вашей страницы. Этот нижний колонтитул содержит 2 подблока с именами классов .нижний колонтитул__1 и .нижний колонтитул__2, и мы хотим, чтобы они занимали 2/3 и 1/3 доступной ширины с желобом 2rem.

Есть ли способ придать сетке, содержащей два подблока, максимальную ширину сетки (да, я это придумал) 60rem, без изменения ширины блока (помните, у него есть фон, который должен быть полной ширины), без использования оболочки? Таким образом, занимаемая ширина (нижний колонтитул__1 пробел нижний колонтитул__2) должна быть не более 60 мм, центрирована по горизонтали.

 <footer>
  <div class="footer__1">foo</div>
  <div class="footer__2">whatever</div>
</footer>
  

 .footer {
  display: grid;
  grid-template_columns: 2fr 1fr;
  grid-column-gap: 2rem;
  /* grid-max-width: 60rem */
}
  

Спасибо

Вы должны обернуть ее дополнительным элементом и ограничить ширину дополнительным элементом.

 footer {
  background-image: linear-gradient(20deg, red, pink);
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-column-gap: 2rem;
  
  /* just for demo purpose */
  max-width: 300px;
  margin: 0 auto;
  min-height: 150px;
  background: white;
  
}  

 <footer>
  <div class="container">
    <div class="footer__1">foo</div>
    <div class="footer__2">whatever</div>
  </div>
</footer>  

Я думаю, что без другого контейнера это невозможно.

Однако вы можете имитировать это, создав нижний колонтитул width: 60rem и установив фон в качестве псевдоэлемента и развернув его.

 footer {
  position: relative;
  z-index: 1;
  width: 60rem;
  margin: 0 auto;
}

footer:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 9999px;
  height: 100%;
  background: green;
}  

 <footer>
  <div class="footer__1">foo</div>
  <div class="footer__2">whatever</div>
</footer>  

Лучший подход, как я думаю, — добавить div.footer__inner то, что будет содержать два divs- .footer__1 и .footer__2 .