Блог

Главная - Вопросы по программированию - Как div может сохранять минимальную высоту внутри макета сетки?

Как div может сохранять минимальную высоту внутри макета сетки?

#html #css #css-grid

#HTML #css #css-сетка

Вопрос:

У меня есть макет сетки, для столбцов шаблона сетки установлено значение (auto auto auto). Затем в каждой сетке у меня есть div, внутри div некоторый текст. Все divs имеют одинаковую высоту, но я хочу, чтобы высота каждого div была как можно меньше. Вот пример:

 body {
  margin: 0;
  background-color: #42cbf5;
}
* {
  box-sizing: border-box;
}
p {
  margin: 0;
}

.wrapper {
  position: relative;
  background-color: #E0E0E0;
  min-height: 300px;
}

.articles {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-auto-rows: 1fr;
}

.article {
  display: inline;
  background-color: white;
  margin: 50px;
  display: block;
  min-height: 5%;
  position: relative;
  padding: 5px;
}  
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="wrapper">
      <div class="articles">

        <div class="article">
          <p>TEST</p>
        </div>

        <div class="article">
          <p>TEST</p>
        </div>

        <div class="article">
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
        </div>

      </div>
    </div>
  </body>
</html>

Каждый белый div имеет одинаковую высоту, это зависит от самого высокого div в каждой строке. Как я могу это изменить? Я пробовал другой дисплей: block / inline / inline-block, ничего не получалось.

Заранее спасибо!

Ответ №1:

margin: auto; в вашем классе article размер div будет минимальным. Возможно, вам придется компенсировать это некоторым дополнением, в зависимости от того, что именно вы собираетесь делать

 .article {
          display: inline;
          background-color: white;
          margin: auto;
          display: block;
          min-height: 5%;
          position: relative;
          padding: 5px;
        }

Комментарии:

1. Это было так, просто, спасибо! Я приму это как ответ, как только смогу. Кроме того, margin: 50px 50px auto 50px; работает так, как я хотел.