Как мне избавиться от лишних пробелов в нижней части моего элемента сетки? - PullRequest
Новая
       7

Как мне избавиться от лишних пробелов в нижней части моего элемента сетки?

2 голосов
/ 19 апреля 2019

У меня много пустого пространства внизу элементов CSS Grid, и я хочу выяснить, почему. Я установил изображение на 40% высоты контейнера, высота которого установлена ​​на 100% высоты. Я понял, что по умолчанию высота элемента сетки (в строке) соответствует его содержанию. Все элементы в неявной строке должны иметь одинаковую высоту, если они занимают только одну строку, что и есть для меня.

Как заставить часть под изображением занимать только пространство, необходимое для следующего и любого отступа, и не более? 

.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: min-content;
  grid-gap: 1rem;

}

.card {
  height: 100%;
  border: 1px solid black;
}

.main-img {
  display: block;
  object-fit: cover;
  height: 40%;
  width: 100%;
}

.author-img {
  display: none;
}
<body>
    <div class="cards">
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1554142918-2c055786cf67?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>The challenges & rewards of being vulnerable</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1553994535-aa6c2ee8cfc1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>Content strategy best practices vs reality with Alex of Scripted</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1554283048-23c1133c646e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content"><h4>Blogging</h4>
          <h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
          <div class="metadata">
            <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
            <div>
              <p class="author-name">By Alex</p>
              <p class="article-date">on April 16th, 2019</p>
            </div>
          </div></div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1554302006-5c11782b1f69?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt=""> 
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>The challenges & rewards of being vulnerable</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1553586633-929ec02f4fb4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>Content strategy best practices vs reality with Alex Barron of Scripted</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
    </div>
</body>

CodePen

Ответы [ 2 ]

1 голос
/ 19 апреля 2019

Вам необходимо установить свой рост в 40% в px or rem or em, потому что 40% вычисляется по-разному, для чувствительности вы можете использовать % or vh, но высота, установленная в px or rem or em, больше подходит в случае this. 

.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: min-content;
  grid-gap: 1rem;
}

.card {
  border: 1px solid black;
}

.main-img {
  display: block;
  object-fit: cover;
  height: 15rem;
  width: 100%;
}

.author-img {
  display: none;
}
<body>
    <div class="cards">
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1554142918-2c055786cf67?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>The challenges & rewards of being vulnerable</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1553994535-aa6c2ee8cfc1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>Content strategy best practices vs reality with Alex of Scripted</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1554283048-23c1133c646e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content"><h4>Blogging</h4>
          <h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
          <div class="metadata">
            <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
            <div>
              <p class="author-name">By Alex</p>
              <p class="article-date">on April 16th, 2019</p>
            </div>
          </div></div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1554302006-5c11782b1f69?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt=""> 
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>The challenges & rewards of being vulnerable</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1553586633-929ec02f4fb4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>Content strategy best practices vs reality with Alex Barron of Scripted</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
    </div>
</body>
0 голосов
/ 20 апреля 2019

Как получить участок под изображением, чтобы он занимал только пространство, необходимое для следующего и любого отступа, и не более?

Элемент сетки, следующий за изображением, представляет собойdiv с заголовком (h4) внутри.Этот заголовок имеет по умолчанию верхнюю и нижнюю границу, установленную браузером.

enter image description here

enter image description here

Переопределитьэто значение по умолчанию с h4 { margin-top: 0 }

.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: min-content;
  grid-gap: 1rem;
}

.card {
  height: 100%;
  border: 1px solid black;
}

.main-img {
  display: block;
  object-fit: cover;
  height: 40%;
  width: 100%;
}

.author-img {
  display: none;
}

h4 {
  margin-top: 0;
}
<div class="cards">
  <article class="card">
    <img class="main-img" src="https://images.unsplash.com/photo-1554142918-2c055786cf67?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
    <!--           <h1>Alex</h1> -->
    <div class="card-content">
      <h4>Blogging</h4>
      <h2>The challenges & rewards of being vulnerable</h2>
      <div class="metadata">
        <img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
        <div>
          <p class="author-name">By Alex</p>
          <p class="article-date">on April 16th, 2019</p>
        </div>
      </div>
    </div>
  </article>
  <article class="card">
    <img class="main-img" src="https://images.unsplash.com/photo-1553994535-aa6c2ee8cfc1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
    <div class="card-content">
      <h4>Blogging</h4>
      <h2>Content strategy best practices vs reality with Alex of Scripted</h2>
      <div class="metadata">
        <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
        <div>
          <p class="author-name">By Alex</p>
          <p class="article-date">on April 16th, 2019</p>
        </div>
      </div>
    </div>
  </article>
  <article class="card">
    <img class="main-img" src="https://images.unsplash.com/photo-1554283048-23c1133c646e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
    <div class="card-content">
      <h4>Blogging</h4>
      <h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
      <div class="metadata">
        <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
        <div>
          <p class="author-name">By Alex</p>
          <p class="article-date">on April 16th, 2019</p>
        </div>
      </div>
    </div>
  </article>
  <article class="card">
    <img class="main-img" src="https://images.unsplash.com/photo-1554302006-5c11782b1f69?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
    <div class="card-content">
      <h4>Blogging</h4>
      <h2>The challenges & rewards of being vulnerable</h2>
      <div class="metadata">
        <img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
        <div>
          <p class="author-name">By Alex</p>
          <p class="article-date">on April 16th, 2019</p>
        </div>
      </div>
    </div>
  </article>
  <article class="card">
    <img class="main-img" src="https://images.unsplash.com/photo-1553586633-929ec02f4fb4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
    <div class="card-content">
      <h4>Blogging</h4>
      <h2>Content strategy best practices vs reality with Alex Barron of Scripted</h2>
      <div class="metadata">
        <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
        <div>
          <p class="author-name">By Alex</p>
          <p class="article-date">on April 16th, 2019</p>
        </div>
      </div>
    </div>
  </article>
  <article class="card">
    <img class="main-img" src="https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
    <div class="card-content">
      <h4>Blogging</h4>
      <h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
      <div class="metadata">
        <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
        <div>
          <p class="author-name">By Alex</p>
          <p class="article-date">on April 16th, 2019</p>
        </div>
      </div>
    </div>
  </article>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...