Как сделать равные элементы grid по высоте с разным контентом?

Question

Нужно создать элементы grid, чтобы они равнялись по самому большому из них, вот код html

.container__grid__main__servers{
  display: grid;
  grid-template-columns: 300px 300px 300px 300px;
  grid-template-rows: 1fr; 

}
.main__servers__item {
  padding: 20px;
margin: 20px;
border: 1px solid grey;
border-radius: 25px;
}

<div class="container__grid__main__servers">
                <div class="main__servers__item__container__grid">
                <div class="main__servers__item">
                    <div class="main__servers__item__title">СП</div>
                    <div class="main__servers__item__text">
                        #СП - Это основной сервер, куда войти можно только с лицензией. За жизнью данного сервера следят большинство зрителей стримов от разных ютуберов. Игроки могут создавать свои города или вступать в уже ...
                    </div>
                    <div class="main__servers__item__more">
                        Подробнее
                    </div>
                </div>  
                </div>
                <div class="main__servers__item__container__grid">
                <div class="main__servers__item">
                    <div class="main__servers__item__title">СПм</div>
                    <div class="main__servers__item__text">
                        На этом сервере проходят обходы на которых игроки показывают, что они успели сделать за время пребывания на сервере. Игроки этого сервера САМИ выбирают президента, который будет руководить жизнью серв...
                    </div>
                    <div class="main__servers__item__more">
                        Подробнее
                    </div>
                </div>
                </div>
                    <div class="main__servers__item__container__grid">
                <div class="main__servers__item">
                    <div class="main__servers__item__title">СПб</div>
                    <div class="main__servers__item__text">#СПб - Долгожданный сервер СП - бедрок, сервер, на который можно заходить и с телефона, и с ПК. Основное кредо этого сервера - взаимоуважение, ролеплей, нет читерам и нон-рпшерам. На сервере действуют...</div>
                    <div class="main__servers__item__more">
                        Подробнее
                    </div>
                </div>
                </div>
                    <div class="main__servers__item__container__grid">
                <div class="main__servers__item">
                    <div class="main__servers__item__title">PoopLand</div>
                    <div class="main__servers__item__text">
                        PoopLand это в первую очередь сервер Сонечки. Наш сервер не похож ни на один из других. У вас не получится забиться в один угол и сидеть в дали от всех, всё завязано на РП. Экономика нашего сервера бу...
                    </div>
                    <div class="main__servers__item__more">
                        Подробнее
                    </div>
                </div>
                </div>
                
            </div>

Спасибо)

Answer 1

Добавьте для айтема 100% высоту, что будет равно максимальной высоте строки.

* { box-sizing: border-box; }

.container__grid__main__servers {
  display: grid;
  grid-template-columns: 300px 300px 300px 300px;
  grid-template-rows: 1fr;
  
  gap: 20px; /* Используйте gap вместо margin для элементов */
}

.main__servers__item {
  padding: 20px;
  border: 1px solid grey;
  border-radius: 25px;
  
  height: 100%; /* Добавьте для айтема 100% высоту, что будет равно максимальной высоте строки */
}

<div class="container__grid__main__servers">
  <div class="main__servers__item__container__grid">
    <div class="main__servers__item">
      <div class="main__servers__item__title">СП</div>
      <div class="main__servers__item__text">
        #СП - Это основной сервер, куда войти можно только с лицензией. За жизнью данного сервера следят большинство зрителей стримов от разных ютуберов. Игроки могут создавать свои города или вступать в уже ...
      </div>
      <div class="main__servers__item__more">
        Подробнее
      </div>
    </div>
  </div>
  <div class="main__servers__item__container__grid">
    <div class="main__servers__item">
      <div class="main__servers__item__title">СПм</div>
      <div class="main__servers__item__text">
        На этом сервере проходят обходы на которых игроки показывают, что они успели сделать за время пребывания на сервере. Игроки этого сервера САМИ выбирают президента, который будет руководить жизнью серв...
        На этом сервере проходят обходы на которых игроки показывают, что они успели сделать за время пребывания на сервере. Игроки этого сервера САМИ выбирают президента, который будет руководить жизнью серв...
      </div>
      <div class="main__servers__item__more">
        Подробнее
      </div>
    </div>
  </div>
  <div class="main__servers__item__container__grid">
    <div class="main__servers__item">
      <div class="main__servers__item__title">СПб</div>
      <div class="main__servers__item__text">#СПб - Долгожданный сервер СП - бедрок, сервер, на который можно заходить и с телефона, и с ПК. Основное кредо этого сервера - взаимоуважение, ролеплей, нет читерам и нон-рпшерам. На сервере действуют...</div>
      <div class="main__servers__item__more">
        Подробнее
      </div>
    </div>
  </div>
  <div class="main__servers__item__container__grid">
    <div class="main__servers__item">
      <div class="main__servers__item__title">PoopLand</div>
      <div class="main__servers__item__text">
        PoopLand это в первую очередь сервер Сонечки. Наш сервер не похож ни на один из других. У вас не получится забиться в один угол и сидеть в дали от всех, всё завязано на РП. Экономика нашего сервера бу...
      </div>
      <div class="main__servers__item__more">
        Подробнее
      </div>
    </div>
  </div>

</div>

БЛОГ НА HUSL

Как сделать равные элементы grid по высоте с разным контентом?

Ответы (1 шт):