0

Имеется блоки которые окутаны в div.wrapper, у него имеются такие свойства

display: grid;
grid-template-columns: 20% 80%;
grid-template-areas: "aside main";
grid-column-gap: .8em;

Также имеется html разметка

<div class="wrapper">
  <main class="main">
     test test test
  </main>
  <aside class="aside">
     hs
  </aside>
</div>

Проблема в том, что при увеличении одного блока, второй увеличивается автоматически. Подскажите, какое свойство решает данную проблему

проблема

2
  • что значит "при увеличении одного блока"? 4 апр 2022 в 14:52
  • Например: в одном блоке, например main, имеется контент на 300 символов, а в блоке aside содержится 20 символом, но он (aside) имеет такую же ширину как и main
    – lowanda777
    4 апр 2022 в 15:02

1 ответ 1

0

Необходимо добавить свойство align-items: start; родителю.

Пример

.wrapper{
  display: grid;
  grid-template-columns: 20% 80%;
  grid-template-areas: "aside main";
  grid-column-gap: .8em;
  align-items: start;
  /* без align-items ширина будет одинакова */
}
.main, .aside{
  padding: .5em;
  background-color: red;
  color: #fff;
  font-family: arial;
}
<div class="wrapper">
  <main class="main">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis harum ipsam nemo officiis sapiente vel, vitae? Adipisci, at autem dolor dolores exercitationem hic laudantium maiores molestias, nesciunt non officia quaerat quam quasi quod rem sapiente soluta vel voluptate! Error, illum?
  </main>
  <aside class="aside">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis harum ipsam nemo officiis sapiente vel.
  </aside>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.