Блог

Главная - Вопросы по программированию - Вторая и последующие строки не имеют заданной полной высоты в сетке

Вторая и последующие строки не имеют заданной полной высоты в сетке

#css #css-grid

#css #css-grid

Вопрос:

Я серверный программист, которого попросили сделать простой проект, поэтому я изо всех сил пытаюсь понять концепцию CSS grid

Первая строка имеет полную высоту 100 пикселей, как указано в grid-template-rows , а начиная со второй, они сворачиваются, чтобы включать только содержимое. Чего мне не хватает?

 .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-template-rows: repeat(auto-fill, 100px);

    grid-column-gap: 2rem;
    grid-row-gap:    6rem;

}
.projects-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #457b9d;
    border-radius: 3px;
} 
 <div class="projects-grid">
    <div id="add" class="projects-grid-item">＋</div>

    <div class="projects-grid-item">
        <a href="/project/list">Проект 1 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">ащщ </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo2 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo3 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo4 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo5 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo6 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo7 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo7 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo8 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo11 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo11 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo12 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo12 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo13 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo13 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo14 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo15 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo16 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">Проект 100500 </a>
    </div>

</div>

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

1. grid-template-rows: repeat(6, 100px); это решает проблему, но я не уверен, ваш это ответ или нет

2. или вы можете добавить height:100px; к своим элементам

3. @MahmoodKiaheyrati Спасибо. Знаете ли вы, почему сетка ведет себя таким образом? Разве не предполагается присваивать равную высоту каждой строке, если это явно указано?

Ответ №1:

Вам нужно использовать grid-auto-rows , который будет определять размер всех неявных строк

Свойства grid-auto-columns и grid-auto-rows определяют размер дорожек, которым не присвоен размер в grid-template-rows или grid-template-columns.ссылка

 .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-auto-rows:  100px;

    grid-column-gap: 2rem;
    grid-row-gap:    6rem;

}
.projects-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #457b9d;
    border-radius: 3px;
} 
 <div class="projects-grid">
    <div id="add" class="projects-grid-item">＋</div>

    <div class="projects-grid-item">
        <a href="/project/list">Проект 1 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">ащщ </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo2 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo3 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo4 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo5 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo6 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo7 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo7 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo8 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo11 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo11 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo12 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo12 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo13 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo13 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo14 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo15 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo16 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">Проект 100500 </a>
    </div>

</div>

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

1. Намного чище, чем я предложил 😉

2. Да, это выглядит потрясающе! Спасибо за чистое решение